FlowGram.AI

FlowGram.AI – 字节跳动开源的前端流程搭建引擎

FlowGram.AI

FlowGram.AI是什么

FlowGram.AI 是字节跳动推出的开源前端流程构建引擎，基于节点编辑的方式，旨在帮助开发者快速搭建固定布局或连线的工作流。该引擎支持两种布局模式：固定布局适合顺序工作流和决策树，提供明确的层次结构以及灵活的分支和复合节点；布局则允许节点定位和手动连线，适合用于网络图和思维导图，并具备对齐、自动布局等实用功能。此外，FlowGram.AI 还提供丰富的交互体验，如动画过渡、手势缩放、撤销重做等功能，支持将工作流导出为图片或代码。

FlowGram.AI的主要功能

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

FlowGram.AI的技术原理

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