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 实现依赖注入，支持动态服务注册，便于插件架构和组件解耦。
FlowGram的项目地址
- 项目官网：flowgram.ai
- Github仓库：https://github.com/bytedance/flowgram.ai
FlowGram的应用场景
- 项目管理：适用于标准化的业务流程，如企业审批流程、订单处理流程等。通过固定布局，可以清晰地展示任务的步骤和分工，确保流程的规范性和一致性。
- 软件开发：适合算法原型设计、代码流程图绘制等场景。节点可以任意放置，连线自由绘制，支持实时流程图与代码双向同步。
- 教学演示：教师可以使用节点式工作流来讲解复杂的概念，如算法逻辑、数据处理流程等，将流程图导出分享给学生，帮助学生更好地理解和学习。
- 企业流程自动化：在企业中，固定布局可以用于构建决策树、自动化任务等，降低人工操作的错误率，提高处理速度。
- AI 和机器学习：适合构建复杂的 AI Bot 对话逻辑、工具调用流程等。自由布局的灵活性使其能够适应多模型组合的复杂调用。