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 實現依賴注入，支持動態服務注冊，便于插件架構和組件的解耦。