扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎

参考

github.com/bytedance/f...

flowgram.ai/guide/intro...

site.logic-flow.cn/article/low...

mp.weixin.qq.com/s/9aWQv4tnk...

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

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

介绍

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

Github: github.com/bytedance/f...

官网:flowgram.ai/

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

布局(固定布局与自由布局)

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

一、交互行为差异

|------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
| 特性 | 固定布局(Fixed Layout) | 自由布局(Free Layout) |
| 节点移动 | 受网格 / 预设位置约束(如 vertical-fixed-layout.ts 实现垂直对齐) | 无约束,任意坐标拖拽(free-layout-core 支持自由坐标) |
| 连接逻辑 | 自动吸附至节点锚点(输入 / 输出端口对齐) | 支持自由路径连线(可弯曲、任意角度) |
| 复合节点 | 内置分支 / 循环等层级结构(如 WorkflowNodeEntity 的子节点递归) | 纯扁平结构,无内置层级(需手动通过节点嵌套模拟) |
| 对齐辅助 | 网格线、吸附提示(代码中 LayoutService 提供对齐算法) | 无辅助线,完全自由摆放 |

二、典型应用场景

固定布局(适合结构化流程)

  • 流程图 / 逻辑图:如审批流程、算法步骤(代码中 fixed-layout-demo.gif 展示分支节点嵌套)。

  • 模块化配置:AI 提示词链的分层配置(@flowgram.ai/fixed-layout-editor 支持输入输出端口绑定)。

  • 特点:强制规范结构,适合需要清晰层级和数据流的场景(如代码生成、自动化任务编排)。

自由布局(适合创意 / 复杂连接)

  • 思维导图:节点无规则关联(free-layout-demo.gif 展示发散式连接)。

  • AI 工作流:多模型组合的复杂调用(free-layout-core 支持任意节点间的动态连线)。

  • 特点:无约束的创作空间,适合探索性、非结构化的流程设计。

三、代码实现差异(关键文件对比)

|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| 功能模块 | 固定布局实现(fixed-layout-core | 自由布局实现(free-layout-core |
| 布局算法 | VerticalFixedLayout.ts 实现垂直方向自动排版 | FreeLayoutService.ts 仅记录节点坐标,无自动排版 |
| 节点数据结构 | 支持 blocks 嵌套(树形结构,如子画布节点) | 扁平的 nodes + edges (JSON 结构无层级) |
| 交互约束 | NodeDragger 限制移动范围(allowDrag 配置) | FreeNodeDragger 完全开放移动(无坐标限制) |
| 连接线 | EdgeAutoAlign 自动拉直(fixed-layout-editor 默认样式) | CubicBezierEdge 支持曲线(自由布局默认样式) |

四、输出数据对比(JSON 结构)

固定布局(含层级)

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

自由布局(纯扁平)

json 复制代码
{
  "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)

♾️、自定义节点

表单与变量

参考:

flowgram.ai/guide/advan...

flowgram.ai/guide/advan...

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

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

FlowGram技术设计

如官网所讲

  • CanvasEngine:画布引擎负责绘制"点-线"构成的图, 保障大规模节点时的流畅性

  • NodeEngine: 节点引擎提供 渲染、校验、数据修改等表单能力

  • VariableEngine: 变量引擎引入作用域模型, 抽象各业务场景的变量

  • Material: 物料库包含默认 ICON 等 UI, 业务接入后可覆盖扩展

变量引擎

flowgram.ai/guide/conce...

非常建议看官方说明。

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

参考官方学习

画布引擎:flowgram.ai/guide/conce...

节点引擎:flowgram.ai/guide/conce...

ECS:flowgram.ai/guide/conce...

IOC:flowgram.ai/guide/conce...

对比ReactFlow:flowgram.ai/guide/conce...

附件

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

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试