参考

https://github.com/bytedance/flowgram.ai

https://flowgram.ai/guide/introduction.html

https://site.logic-flow.cn/article/lowcode-with-logicflow

https://mp.weixin.qq.com/s/9aWQv4tnkGcHW04RxK1VsA

扣子及AI 工作流搭建技术-刘文成.pdf

前前文：免费使用满血版DeepSeek-R1的多种方案、大语言模型（LLM）应用开发平台

介绍

FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布局或自由连线布局的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。

Github: https://github.com/bytedance/flowgram.ai

官网：https://flowgram.ai/

已服务字节内部30+项目，包含扣子工作流、飞书低代码平台工作流、飞书多维表格工作流等。

布局（固定布局与自由布局）

固定布局（Fixed Layout）与自由布局（Free Layout）的核心区别体现在节点约束、交互逻辑、适用场景三个维度，以下是具体对比：

一、交互行为差异

二、典型应用场景

固定布局（适合结构化流程）

• 流程图 / 逻辑图：如审批流程、算法步骤（代码中 fixed-layout-demo.gif 展示分支节点嵌套）。
• 模块化配置：AI 提示词链的分层配置（@flowgram.ai/fixed-layout-editor 支持输入输出端口绑定）。
• 特点：强制规范结构，适合需要清晰层级和数据流的场景（如代码生成、自动化任务编排）。

自由布局（适合创意 / 复杂连接）

• 思维导图：节点无规则关联（free-layout-demo.gif 展示发散式连接）。
• AI 工作流：多模型组合的复杂调用（free-layout-core 支持任意节点间的动态连线）。
• 特点：无约束的创作空间，适合探索性、非结构化的流程设计。

三、代码实现差异（关键文件对比）

四、输出数据对比（JSON 结构）

固定布局（含层级）

{
  "nodes": [
    {
      "id": "root",
      "type": "flow",
      "blocks": [  
        { "id": "step1", "label": "开始" },
        { 
          "id": "branch", 
          "type": "if", 
          "blocks": [{"id": "then", "label": "条件成立"}]  
        }
      ]
    }
  ]
}

自由布局（纯扁平）

{
  "nodes": [
    { "id": "node1", "x": 100, "y": 50, "label": "A" },
    { "id": "node2", "x": 300, "y": 200, "label": "B" }
  ],
  "edges": [
    { "source": "node1", "target": "node2", "path": "M100,50 Q200,125 300,200" }  // 贝塞尔曲线坐标
  ]
}

五、如何选择？

• 选固定布局：需要强制规范结构、层级嵌套（如流程图、低代码表单）。
• 选自由布局：追求灵活性、创意连接（如 AI 多模态流程、思维导图）。

实际案例：

• 固定布局：文档中的「审批流程」示例，节点必须按顺序排列，分支结构清晰。
• 自由布局：AI 提示词生成器，用户可随意连接「主题」「修饰词」「输出格式」节点。

通过 npx @flowgram.ai/create-app 初始化项目时，可直接选择 fixed-layout-simple 或 free-layout-simple 模板体验差异

复合节点（条件、循环、错误监控）

一、条件组件（Condition）

二、循环组件（Loop）

三、错误监控组件（Try Catch）

四、大模型组件（LLM）

、自定义节点

表单与变量

参考：

https://flowgram.ai/guide/advanced/form.html

https://flowgram.ai/guide/advanced/variable.html

变量引擎是 Flowgram 提供的一个可选内置功能，可以帮助 Workflow 设计时更高效地实现变量信息编排。它可以实现以下功能：

作用域约束控制、变量信息树的维护、变量类型自动联动推导

FlowGram技术设计

如官网所讲

• CanvasEngine：画布引擎负责绘制“点-线”构成的图, 保障大规模节点时的流畅性
• NodeEngine: 节点引擎提供 渲染、校验、数据修改等表单能力
• VariableEngine: 变量引擎引入作用域模型, 抽象各业务场景的变量
• Material: 物料库包含默认 ICON 等 UI, 业务接入后可覆盖扩展

变量引擎

https://flowgram.ai/guide/concepts/variable-engine.html

非常建议看官方说明。

画布引擎、节点引擎、ECS、IOC、等

参考官方学习

画布引擎：
https://flowgram.ai/guide/concepts/canvas-engine.html

节点引擎：
https://flowgram.ai/guide/concepts/node-engine.html

ECS：https://flowgram.ai/guide/concepts/ecs.html

IOC：https://flowgram.ai/guide/concepts/ioc.html

对比ReactFlow：
https://flowgram.ai/guide/concepts/reactflow.html

附件

如果你看了前面的参考，就知道这是3月8日第19届D2终端技术大会中工程研发专场中《扣子及AI 工作流搭建技术-刘文成》的分享。也是在这个时间之后FlowGram才开源。