扣子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才开源。

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程