高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

源码资源网

高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

字节跳动（ByteDance）近期开源了其基于节点的流程构建引擎：FlowGram。而且也是在飞书工作流、扣子 Coze 自动化 等产品中使用的核心可视化流程引擎。

插件化构建流程引擎

高性能，可扩展，可定制

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

在 AI 如火如荼的当下，我们也会更专注于如何让流程赋能 AI，为此特意加上 AI 后缀。

界面展示

高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

扣子

高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

飞书低代码平台工作流

高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

飞书多维表格

高性能插件化构建流程引擎 扣子 Coze 的 AI 工作流搭建技术

四、功能概述

FlowGram是一个基于节点的流程构建引擎，帮助开发者快速创建固定布局或自由连接布局的 workflows。

对比 ReactFlow

Reactflow 是很优秀的开源项目，架构及代码清晰，但偏流程渲染引擎的底层架构 (Node、Edge、Handle)，需要在上层开发大量功能才能适配复杂场景(如 固定布局，需要对数据建模写布局算法), 高级功能收费。

相比 Reactflow，FlowGram 的目标是提供流程编辑一整套开箱即用的解决方案。

• 下边是 Reactflow 官方提供的 pro 收费能力
  

付费功能	FlowGram 是否支持	未来计划支持
分组	支持
redo/undo	支持
copy/paste	支持
HelpLines 辅助线	支持
自定义节点及形状	支持
自定义线条	支持
AutoLayout，自动布局整理	支持
ForceLayout，节点排斥效果	不支持	No
Expand/Collapse	支持
Collaborative 多人协同	不支持	Yes
WorkflowBuilder 相当于固定布局完整案例	支持

• Reactflow 事件都是绑定在原子化的 dom 节点上，且内置，交互定制成本高，需要理解它的源码才能深度开发，如下，在画布缩放很小时候无法选到点位
  

来源：FlowGram.AI 官网文档

五、技术选型安装通过 npx 安装

MacOS / Linux / WSL / Git Bash

1. npx@flowgram.ai/create-app@latest

复制代码

1. # 选择 demo
   
2. - fixed-layout # 固定布局最佳实践
   
3. - free-layout # 自由布局最佳实践
   
4. - fixed-layout-simple # 固定布局基础用法
   
5. - free-layout-simple # 自由布局基础用法

复制代码

通过 npm 安装MacOS / Linux / WSL / Git Bash

1. npm install @flowgram.ai/fixed-layout-editor

复制代码

MacOS / Linux / WSL / Git Bash

1. npm install @flowgram.ai/free-layout-editor

复制代码

链接：https://pan.quark.cn/s/4b303dc9837a
提取码下载：

文件名称:提取码下载.txt 
下载次数:0  文件大小:16 Bytes 
下载权限: 不限 [购买VIP]   [充值]   [在线充值]   【VIP会员6折；永久VIP4折】

安全检测，请放心下载