FlowGram - 字节跳动推出的开源可视化工作流构建引擎，助力开发者优化流程管理

FlowGram是什么

FlowGram是字节跳动开源的基于节点编辑的可视化工作流搭建引擎，帮助开发者快速构建固定布局或自由连线布局的工作流。支持两种布局模式：固定布局适合顺序工作流和决策树，提供层次化结构和灵活的分支、复合节点；自由布局支持节点自由定位和手动连线，适合网络图和思维导图，支持对齐、自动布局等功能。FlowGram提供丰富的交互功能，如动画过渡、手势缩放、撤销重做等，可将工作流导出为图片或代码。

FlowGram的主要功能

双布局模式
- 固定布局：节点被约束在预设网格中，适合流程标准化、有清晰层级的场景，如企业审批、订单处理等，还能自动生成代码骨架。
- 自由布局：节点位置更随意，连接线自由，适合思维导图、算法原型等场景，可实现流程图和代码之间的实时双向同步。
交互功能
- 提供 Motion 动画，让节点变化有过渡过程。
- 支持模块化，可进行分组及分支折叠。
- 提供批量操作，如框选拖拽、批量复制粘贴。
- 支持布局切换，包括水平/垂直模式切换。
- 辅助排版功能，如参考线、吸附对齐、自动整理、缩略图等。
AI 赋能
- 具备智能建议功能，例如在做数据清洗节点时，能推荐下一步可能的操作。
- 能进行风险预测，可在流程测试阶段拦截高达 83% 的类型错误和 64% 的潜在无限循环风险。
- 搭建好的流程可自动生成文档。
扩展性
- 提供画布引擎、节点引擎、变量引擎等核心组件，开发者可以在此基础上构建自己的业务逻辑和自定义节点。
- 通过将画布的交互分层及 IOC 依赖注入实现扩展，开发者可通过依赖注入监听自己想要的节点数据。
- 变量引擎具有作用域约束功能，且内部大量功能都以插件化形式开放。
导出功能：工作流可以导出为图片或代码。

FlowGram的技术原理

画布引擎（Canvas Engine）：负责文档管理、节点渲染和用户交互，如拖拽、缩放等，为固定布局和自由布局提供基础。
节点引擎（Node Engine）：管理节点数据，支持表单渲染、校验和动态表单渲染，实现复杂节点配置。
变量引擎（Variable Engine）：管理节点间数据流，通过作用域和类型管理，使用抽象语法树（AST）表示变量及其关系。
插件系统（Plugin System）：通过模块化架构扩展编辑器功能，不同布局类型可注册不同插件。
基于 Canvas 的自研渲染引擎：针对流程图优化，支持大量节点（200+节点保持60FPS），采用类似 ECS 的数据分割和 MobX 的响应式机制，确保高效渲染。
Web Worker 并行化：将耗时计算移至后台线程，避免阻塞主线程，保持界面响应。
智能缓存：提升加载速度40%，使大型项目快速打开。
ECS 架构：采用实体组件系统（ECS）架构，将数据（组件）与实体解耦，提高性能和可扩展性。
依赖注入（IOC）：使用 Inversify 实现依赖注入，支持动态服务注册，便于插件架构和组件解耦。