FlowGram 简介：开源前端流程搭建引擎FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布

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

Github: github.com/bytedance/f…
官网：flowgram.ai/

1. 背景

在 AI 如火如荼的当下，流程扮演串联不同 Agent 或大模型的角色，通过可视化方式表达模型节点间的调用关系，即使没有编程经验也能直观理解调用逻辑，而 FlowGram 便是这类流程的搭建引擎，下边是两个案例：

扣子工作流：通过选择器节点判断用户输入的是图片、声音或文本，调用不同的模型节点总结分析再返回给用户。
ComfyUI：通过自由连接节点 + 图像实时预览，满足特定的图像生成需求。

2. 业务应用

目前已服务字节 30 + 项目。

案例	截图
扣子工作流
飞书低代码平台工作流
飞书多维表格工作流

3. 快速上手

通过 npx 快速创建官方最佳实践：

# 创建 Demo
npx @flowgram.ai/create-app@latest

# 选择案例
- fixed-layout # 固定布局最佳实践
- free-layout # 自由布局最佳实践

目前我们提供两种布局模式：

固定布局，节点/分支支持指定位置拖拽移动，并提供分支、循环等复合节点

自由布局，节点支持任意位置移动，通过自由连线连接节点

4. 了解更多

4.1 丰富的交互体验

我们提供一套交互的最佳实践，让操作流程更加丝滑

交互	截图
模块化：分组及分支折叠
批量操作：框选拖拽、批量复制粘贴
布局切换：支持水平/垂直模式切换
辅助排版：参考线、吸附对齐、自动整理、缩略图
Motion 动画：让节点变化有个过渡过程

4.2 丰富的复合节点

复合节点	截图
Condition 条件判断，分固定布局模式和自由布局模式
Loop 循环，分固定布局模式和自由布局模式
Try/Catch 错误监控，固定布局模式，支持对一条分支的节点做监控
Slot 插槽，固定布局模式，支持将一类节点以插槽的形式挂载到目标节点上

4.3 具备 ReactFlow 大部分付费功能

功能	ReactFlow Pro 付费功能	FlowGram 是否支持
分组	✅	✅
redo/undo	✅	✅
copy/paste	✅	✅
HelpLines 辅助线	✅	✅
自定义节点及形状	✅	✅
自定义线条	✅	✅
AutoLayout，自动布局整理	✅	✅
ForceLayout，节点排斥效果	✅	❌ 如有诉求可跟进
Expand/Collapse	✅	✅
Collaborative多人协同	✅	❌ 计划中
WorkflowBuilder 相当于固定布局完整案例	✅	✅

4.4 强大的扩展性

底层提供画布引擎（通过分层扩展交互）、节点引擎（节点的表单渲染、校验）、变量引擎（节点间变量的引用管理）、物料库（扩展节点及 UI 组件）来丰富业务扩展

整体架构.png

通过将画布的交互分层 (Layer) 及 IOC (Inversion of Control) 依赖注入实现扩展：

layer 分层.jpg

@injectable()
class MyLayer extends Layer {
    /**
     * 通过依赖注入监听自己想要的节点数据
     */
    @observeEntityDatas(FlowNodeEntity, FlowNodeTramsformData) transforms;
    /*
    * 渲染 Layer
    */
    render() {
     return this.transforms.map(trans => <div>x: {trans.x} y: {trans.y}</div>)
    }
    /**
     * 扩展画布生命周期
     */
    onReady() {}
    onResize() {}
    onFocus() {}
    onBlur() {}
    onZoom() {}
    onScroll() {}
    onViewportChange() {}
    onReadonlyOrDisabledChange() {}
 }