FlowGram.ai 是什么？

FlowGram.AI 是字節(jié)跳動(dòng)開發(fā)的一款基于節(jié)點(diǎn)編輯的開源流程搭建引擎，可以幫助開發(fā)者快速創(chuàng)建固定布局或自由連接布局的工作流。

FlowGram.AI核心功能

• 雙布局模式：提供固定布局和自由布局兩種模式。固定布局中，節(jié)點(diǎn)會(huì)被約束在預(yù)設(shè)的網(wǎng)格里，適合流程標(biāo)準(zhǔn)化、有清晰層級的場景，如企業(yè)審批、訂單處理等，還能自動(dòng)生成代碼骨架；自由布局則讓節(jié)點(diǎn)位置更隨意，連接線也更加自由，適合思維導(dǎo)圖、算法原型等場景，并且能實(shí)現(xiàn)流程圖和代碼之間的實(shí)時(shí)雙向同步。

• 交互最佳實(shí)踐：集成了一系列交互最佳實(shí)踐，如 Motion 動(dòng)畫，讓節(jié)點(diǎn)變化有過渡過程；支持模塊化，可進(jìn)行分組及分支折疊；提供批量操作，如框選拖拽、批量復(fù)制粘貼；支持布局切換，包括水平 / 垂直模式切換；還有輔助排版功能，如參考線、吸附對齊、自動(dòng)整理、縮略圖等，以提供直觀、易用的用戶界面和流暢的交互體驗(yàn)。

• AI 賦能增強(qiáng)：在 FlowGram.AI 版本中，具備智能建議功能，例如在做數(shù)據(jù)清洗節(jié)點(diǎn)時(shí)，能推薦下一步可能的 “異常值檢測”；還能進(jìn)行風(fēng)險(xiǎn)預(yù)測，據(jù)內(nèi)部測試數(shù)據(jù)，可在流程測試階段攔截高達(dá) 83% 的類型錯(cuò)誤和 64% 的潛在無限循環(huán)風(fēng)險(xiǎn)；另外，搭建好的流程可自動(dòng)生成文檔，解決了 “祖?zhèn)鞔a沒文檔” 的問題。

• 強(qiáng)大的擴(kuò)展性：提供畫布引擎、節(jié)點(diǎn)引擎、變量引擎等核心組件，開發(fā)者可以在此基礎(chǔ)上構(gòu)建自己的業(yè)務(wù)邏輯和自定義節(jié)點(diǎn)。畫布引擎通過分層擴(kuò)展交互，節(jié)點(diǎn)引擎負(fù)責(zé)節(jié)點(diǎn)的表單渲染、校驗(yàn)，變量引擎管理節(jié)點(diǎn)間變量的引用，物料庫用于擴(kuò)展節(jié)點(diǎn)及 UI 組件。通過將畫布的交互分層及 IOC 依賴注入實(shí)現(xiàn)擴(kuò)展，開發(fā)者可通過依賴注入監(jiān)聽自己想要的節(jié)點(diǎn)數(shù)據(jù)，變量引擎具有作用域約束功能，且內(nèi)部大量功能都以插件化形式開放。

FlowGram.AI技術(shù)架構(gòu)

• 基于 Canvas 的自研渲染引擎：專門為流程圖這種復(fù)雜場景優(yōu)化，支持超多節(jié)點(diǎn)（200 + 節(jié)點(diǎn)還能保持流暢 60FPS，甚至有數(shù)據(jù)提到萬級節(jié)點(diǎn)流暢操作），縮放、滾動(dòng)都流暢絲滑。采用了類似 ECS 的數(shù)據(jù)分割和 MobX 的響應(yīng)式機(jī)制，確保渲染高效不卡頓。

• Web Worker 并行化：把耗時(shí)的計(jì)算扔到后臺去做，不阻塞主線程，保證界面始終響應(yīng)。

• 智能緩存：加載速度能提升 40%，大型項(xiàng)目也能秒開。

FlowGram.AI應(yīng)用場景

• “扣子” 工作流：用于構(gòu)建復(fù)雜的 AI Bot 對話邏輯、工具調(diào)用流程。

• 飛書低代碼平臺 / 多維表格：用戶可通過可視化界面搭建審批流程、自動(dòng)化任務(wù)。

• 企業(yè)流程自動(dòng)化：例如通過固定布局搭建決策樹，能降低分揀錯(cuò)誤率，提升處理速度。

• 算法原型 / 數(shù)據(jù)管道：自由布局適合探索性、迭代性的工作，甚至有人用它來做 ComfyUI 這樣的圖像生成流程。

使用方式

提供在線 Demo，用戶可以直接在瀏覽器里體驗(yàn)；也支持本地安裝，通過簡單的命令（如npx @flowgram.ai/create - app@latest）就能快速搭建一個(gè)項(xiàng)目模板，方便開發(fā)者深入開發(fā)。

相關(guān)鏈接

官網(wǎng)：https://flowgram.ai/

GitHub地址：https://github.com/bytedance/flowgram.ai