跳到內容
FlowAI Logo FlowAI 文档

輸出節點（支持多種輸出格式）

輸出節點是工作流的最後一個節點，用於呈現工作流的最終結果。現在，輸出節點除了支持將Markdown渲染為可視化內容外，還新增了對輸出格式的配置，可按 HTML 渲染你在“選擇輸出內容”裡選定的值。無論該值來自模型、“高級模板節點” 動態拼接，還是其他節點產出的 HTML 字符串，輸出節點都會在安全沙箱中進行顯示。

使用方法

在節點配置中：

  • 在選擇輸出內容中，選擇需要輸出的文本或模板變量（示例：$Template1.template）。
  • 在輸出格式中，選擇期望的渲染類型：
    • Markdown（默認）
    • HTML

提示：輸出“內容”由選擇輸出內容決定；“輸出格式”只決定渲染方式。

提示：可以與“高級模板節點”配合使用，動態拼接/組裝輸出內容，再交由輸出節點渲染。

輸出格式說明

  • Markdown（默認）

    • 自動將 Markdown 渲染為可視化內容。
    • 適用快速說明文檔、數據摘要、表格/清單等。

  • HTML

    • 該模式按照 HTML 渲染你在選擇輸出內容中選擇的值。
    • 該值可以來自LLM節點、由“高級模板節點”動態拼接的 HTML，或任何能產出 HTML 字符串的節點。
    • 在沙箱中渲染，默認僅渲染 HTML 與 CSS。
    • 可選項：允許腳本執行（默認未選中）。
      • 關閉：僅渲染靜態 HTML，不執行腳本。
      • 開啟：允許使用 <script>、引用外部 JS 庫，實現圖表、動畫、交互等效果。在隔離環境中允許 JavaScript 腳本執行

輸出節點使用示意圖

安全與隔離

  • 所有 HTML 均在安全沙箱中渲染，與主環境相互隔離。
  • 僅在顯式開啟“允許腳本執行”後，才會在沙箱內運行 JavaScript。
  • 建議僅加載可信來源的腳本與資源（可使用主流 CDN）。

示例：自定義 HTML（腳本關閉）

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>結果預覽</title>
    <style>
      body {
        font:
          14px/1.6 system-ui,
          sans-serif;
        margin: 24px;
      }
      .card {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <h2>分析結果</h2>
    <div class="card">
      <!-- 可由高級模板節點動態拼接 -->
      <p>結論：{{ result.summary }}</p>
    </div>
  </body>
</html>

示例：自定義/模型 HTML（開啟腳本）

當勾選“在隔離環境中允許 JavaScript 腳本執行（用於交互式內容）”後，可以引用 JS 庫實現交互式可視化：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>銷量圖表示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <h2>月度銷量</h2>
    <canvas id="chart" width="600" height="300"></canvas>
    <script>
      const ctx = document.getElementById('chart');
      const data = {{ result.chartDataJson }}; // 由高級模板節點注入
      new Chart(ctx, {
        type: 'line',
        data,
        options: { responsive: true }
      });
    </script>
  </body>
</html>

Markdown 語法支持情況

比如下面的測試語法：

# 標題1


### 標題 3


##### 標題 5


**粗體文本**
_斜體文本_
**_粗斜體文本_**
~~刪除線~~


- 無序列表項 1
- 無序列表項 2
    - 嵌套列表項 2.1
    - 嵌套列表項 2.2


1. 有序列表項 1
2. 有序列表項 2
    1. 嵌套有序列表項 2.1
    2. 嵌套有序列表項 2.2


> 這是一個引用
>
> > 這是一個嵌套引用


`行內代碼`


```python
def hello_world():
    print("Hello, World!")
```


[鏈接文本](https://www.example.com)


![圖片描述](https://flowai.cc/main-logo.png)


| 表頭 1   | 表頭 2   | 表頭 3   |
| -------- | -------- | -------- |
| 單元格 1 | 單元格 2 | 單元格 3 |
| 單元格 4 | 單元格 5 | 單元格 6 |


## 水平分割線:


任務列表:


- [x] 已完成任務
- [ ] 未完成任務


上標和下標：


H~2~O 是水的化學式


2^10^ = 1024


細節摺疊：


<details>
<summary>點擊展開詳情</summary>


這裡是隱藏的詳細內容。
可以包含多行文本、列表、代碼等。


</details>


LaTeX 化學方程式：


$$
\\ce{Ba^2+ + SO4^2- =BaSO4 v}
$$

可能會得到類似於下面這樣的輸出：

輸出1

輸出2

輸出3

數學公式和 Mermaid 圖表

可以輸入下面這個Markdown語法測試：

數學公式


行內公式：$E = mc^2$


行間公式：


$$
\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x + h) - f(x)}{h}
$$


Mermaid 圖表


```mermaid
graph TD
    A[開始] --> B{是否有咖啡?}
    B -->|是| C[喝咖啡]
    B -->|否| D[買咖啡]
    C --> E[繼續工作]
    D --> E
    E --> F[結束]
```


```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```


```mermaid
gantt
    title 項目進度表
    dateFormat  YYYY-MM-DD
    section 設計階段
    需求分析           :done,    des1, 2023-01-01, 2023-01-05
    系統設計           :active,  des2, 2023-01-06, 3d
    詳細設計           :         des3, after des2, 5d
    section 開發階段
    編碼               :         dev1, after des3, 20d
    測試               :         dev2, after dev1, 10d
    section 部署階段
    部署準備           :         dep1, after dev2, 2d
    上線               :         dep2, after dep1, 1d
```

可能會得到類似於下面這樣的輸出：

輸出4

輸出5

定製服務

官方團隊為您量身定製專業的自動化解決方案