跳转到内容
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