一、开源项目简介

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

FlowGram.AI

插件化构建流程引擎

高性能，可扩展，可定制

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

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

FlowGram = Flow + Program，寓意流程如程序一样，拥有 Condition、Loop 甚至 TryCatch 节点。

二、开源协议

使用MIT开源协议

三、界面展示

扣子

 

 

飞书低代码平台工作流

 

 

飞书多维表格

 

四、功能概述

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

对比 ReactFlow

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

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

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

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

来源：FlowGram.AI 官网文档

五、技术选型

安装

通过 npx 安装

MacOS / Linux / WSL / Git Bash

npx@flowgram.ai/create-app@latest

# 选择 demo
- fixed-layout # 固定布局最佳实践
- free-layout # 自由布局最佳实践
- fixed-layout-simple # 固定布局基础用法
- free-layout-simple # 自由布局基础用法

通过 npm 安装

MacOS / Linux / WSL / Git Bash

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

MacOS / Linux / WSL / Git Bash

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