前端低代碼工作流自動化流程編排【免費下載鏈接】flowgram.aiFlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.項目地址https://gitcode.com/gh_mirrors/fl/flowgram.ai點擊查看免費下載本文以 FlowGram.AI 的中文說明文檔為核心結(jié)合開源倉庫中的 monorepo 結(jié)構(gòu)、create-app 腳手架源碼與示例工程代碼系統(tǒng)講解 FlowGram 的定位與四大核心能力自由布局畫布、固定布局畫布、表單引擎、變量引擎、從npx flowgram.ai/create-app到本地運行的完整上手流程以及將自由布局編輯器集成進自有 React 項目的典型代碼范式讀完即可在本地跑通官方 Demo 并理解各功能包之間的調(diào)用關(guān)系。一、FlowGram 是什么框架而非現(xiàn)成平臺FlowGram 是一個可組合、可視化、易于集成且可擴展的工作流開發(fā)框架與工具集目標是幫助開發(fā)者以更快、更簡單的方式搭建 AI 工作流平臺。它內(nèi)置了開箱即用的工作流開發(fā)能力可視化流程畫布自由布局 固定布局兩種形態(tài)節(jié)點配置表單引擎變量作用域鏈開箱即用的物料LLM、條件、代碼編輯器等。需要特別強調(diào)官方文檔的定位表述FlowGram 并非一個現(xiàn)成的工作流平臺而是幫助你構(gòu)建平臺的框架與工具。這一區(qū)別直接體現(xiàn)在倉庫的組織方式上——倉庫rush.json中以 Rush monorepo 管理了約 70 個項目按職責劃分為引擎層packages/canvas-engine、packages/node-engine、packages/variable-engine、packages/runtime、客戶端編輯器packages/client、插件packages/plugins含 30 余個獨立插件包、物料packages/materials以及多個可獨立運行的示例應(yīng)用apps/demo-*。用戶既可以整體使用示例工程也可以按需取用其中任意一層。二、快速上手從一條命令到本地運行官方文檔給出的最短上手路徑是三步1. 創(chuàng)建一個新的 FlowGram 項目npx flowgram.ai/create-applatest官方推薦選擇Free Layout Demo模板。2. 啟動項目cd demo-free-layout npm install npm start3. 在瀏覽器中打開http://localhost:3000。模板選項與 create-app 的底層實現(xiàn)上述命令背后的實現(xiàn)位于 apps/create-app/src/index.ts。從源碼看交互式界面提供的 7 個模板選擇為交互選項名對應(yīng)模板包Fixed Layout Demodemo-fixed-layoutFree Layout Demodemo-free-layoutFixed Layout Demo Simpledemo-fixed-layout-simpleFree Layout Demo Simpledemo-free-layout-simpleFree Layout Nextjs Demodemo-nextjsFree Layout Vite Demo Simpledemo-viteDemo Playground for infinite canvasdemo-playground除了交互式選擇create-app還支持直接傳參創(chuàng)建源碼中合法參數(shù)為fixed-layout、free-layout、fixed-layout-simple、free-layout-simple、playground、nextjs會自動拼接為demo-參數(shù)名文件夾名。其工作流可以歸納為通過npm view查詢對應(yīng) demo 包的 latest 版本號從 npm registry 下載flowgram.ai/模板名的 tarball 并解壓到當前目錄將解壓目錄重命名為模板名并批量把package.json中所有flowgram.ai前綴的依賴版本對齊為flowgram.ai/core的最新版本保證整套包版本一致。因此模板工程并非從 Git 倉庫克隆而是以 npm 包分發(fā)的形式落地這也解釋了為什么每個 demo 包都帶有files字段如 apps/demo-free-layout/package.json 中聲明發(fā)布src/、rsbuild.config.ts、index.html等文件。運行腳本與依賴結(jié)構(gòu)以官方推薦的 demo-free-layout 為例npm start實際執(zhí)行的是cross-env NODE_ENVdevelopment rsbuild dev --open即基于 Rsbuild 的開發(fā)服務(wù)器。其依賴清單本身就是一份自由布局編輯器所需插件的完整清單{ dependencies: { flowgram.ai/free-layout-editor: workspace:*, flowgram.ai/free-snap-plugin: workspace:*, flowgram.ai/free-lines-plugin: workspace:*, flowgram.ai/free-node-panel-plugin: workspace:*, flowgram.ai/minimap-plugin: workspace:*, flowgram.ai/export-plugin: workspace:*, flowgram.ai/free-container-plugin: workspace:*, flowgram.ai/free-group-plugin: workspace:*, flowgram.ai/form-materials: workspace:*, flowgram.ai/panel-manager-plugin: workspace:*, flowgram.ai/free-stack-plugin: workspace:*, flowgram.ai/runtime-js: workspace:* } }monorepo 內(nèi)以workspace:*協(xié)議引用腳手架生成的模板工程中會被替換為具體版本號。可以看到自由布局編輯器由核心編輯器包 若干能力插件組合而成連線lines、吸附snap、節(jié)點面板node-panel、小地圖minimap、分組group、容器container、導出export、面板管理panel-manager等能力均以獨立插件包形式提供這正是可組合定位的具體體現(xiàn)。參與源碼開發(fā)的運行環(huán)境要求若需要直接基于本倉庫開發(fā)rush.json 聲明了官方工具鏈約束Rush 版本5.150.0包管理器為pnpm10.6.5Rush 會安裝隔離的本地副本Node.js 支持版本范圍18.20.3 19.0.0 || 20.14.0 23.0.0。倉庫還配套了 git hookscommon/git-hooks與自動安裝腳本common/scripts/install-run-rush.js、install-run-rushx.js用于在提交前執(zhí)行 lint 與依賴一致性檢查。三、官方 Demo 演示的工作流全貌README 中描述的演示案例是一條典型的 AI 工作流遍歷一組城市通過 HTTP 獲取實時天氣用 Code 節(jié)點解析溫度借助 LLM 生成穿搭建議經(jīng)由 Condition 進行篩選在循環(huán)中匯總結(jié)果最后使用 Advisor LLM 選出最舒適的城市并將結(jié)果發(fā)送至 End 節(jié)點。這條流程與 Demo 工程注冊的節(jié)點類型一一對應(yīng)。apps/demo-free-layout/src/nodes/index.ts 中注冊了 15 類節(jié)點export const nodeRegistries: FlowNodeRegistry[] [ ConditionNodeRegistry, StartNodeRegistry, EndNodeRegistry, LLMNodeRegistry, LoopNodeRegistry, CommentNodeRegistry, BlockStartNodeRegistry, BlockEndNodeRegistry, HTTPNodeRegistry, CodeNodeRegistry, ContinueNodeRegistry, BreakNodeRegistry, VariableNodeRegistry, GroupNodeRegistry, MultiConditionNodeRegistry, ];演示提到的循環(huán)中匯總對應(yīng)LoopNodeRegistry配合ContinueNodeRegistry/BreakNodeRegistryHTTP 獲取天氣對應(yīng)HTTPNodeRegistry解析溫度對應(yīng)CodeNodeRegistry生成穿搭建議 / Advisor LLM對應(yīng)LLMNodeRegistryCondition 篩選對應(yīng)ConditionNodeRegistry/MultiConditionNodeRegistry起始與收尾則是StartNodeRegistry/EndNodeRegistry。節(jié)點注冊表FlowNodeRegistry[]是把業(yè)務(wù)節(jié)點接入畫布的統(tǒng)一入口下一節(jié)會展示它在編輯器中的用法。四、四大核心能力官方文檔將特性歸納為表格形式這里逐條展開并映射到倉庫中對應(yīng)的實現(xiàn)包。4.1 Free Layout Canvas自由布局畫布自由布局畫布中節(jié)點可任意擺放并可在節(jié)點間創(chuàng)建邊進行鏈接適合無固定流程拓撲的圖編輯場景。實現(xiàn)上由 packages/canvas-engine 提供地基coreflowgram.ai/core畫布核心documentflowgram.ai/document節(jié)點/邊/畫布的文檔模型rendererflowgram.ai/renderer渲染層free-layout-coreflowgram.ai/free-layout-core自由布局專有邏輯客戶端封裝packages/client/free-layout-editorflowgram.ai/free-layout-editor。從 packages/client/free-layout-editor/src/index.ts 的導出結(jié)構(gòu)看該包對外聚合了核心模塊flowgram.ai/editor、自由布局核心free-layout-core、預設(shè)preset、Hooks、工具函數(shù)并直接再導出free-history-plugin歷史/撤銷能力即一個包拿到可用的自由布局編輯器export * from flowgram.ai/editor; export * from flowgram.ai/free-layout-core; export * from ./components; export * from ./preset; export * from ./hooks; export * from ./tools; export * from flowgram.ai/free-history-plugin;4.2 Fixed Layout Canvas固定布局畫布固定布局畫布中節(jié)點可拖拽至指定位置并支持復合節(jié)點如分支與循環(huán)適合流程結(jié)構(gòu)相對規(guī)整、需要層級化表達的業(yè)務(wù)流程。對應(yīng)實現(xiàn)包為packages/canvas-engine/fixed-layout-core與packages/client/fixed-layout-editor另有fixed-drag-plugin固定布局拖拽、fixed-history-plugin固定布局歷史、fixed-semi-materials基于 Semi 設(shè)計的固定布局物料等配套包。4.3 Form表單引擎表單引擎負責管理節(jié)點數(shù)據(jù)的增刪改查并提供渲染、驗證、副作用、聯(lián)動和錯誤捕獲等能力從而簡化節(jié)點配置界面的開發(fā)。倉庫中對應(yīng)packages/node-engine下的form-coreflowgram.ai/form-core表單核心與formflowgram.ai/form物料側(cè)則提供packages/materials/form-materials、form-antd-materials等表單物料包。倉庫中專有apps/demo-node-form示例工程專門演示節(jié)點表單這一場景表單元數(shù)據(jù)驅(qū)動的寫法可參考該工程的form-meta.tsx與node-registries.tsx見 apps/demo-node-form/src。4.4 Variable變量引擎變量引擎支持作用域約束、變量結(jié)構(gòu)檢查和類型推斷用于管理工作流中的數(shù)據(jù)流。實現(xiàn)位于packages/variable-enginevariable-coreflowgram.ai/variable-core變量模型與作用域鏈核心variable-layoutflowgram.ai/variable-layout變量選擇器相關(guān)的布局能力json-schemaflowgram.ai/json-schema基于 JSON Schema 的結(jié)構(gòu)描述。配合插件packages/plugins/node-variable-plugin、packages/plugins/variable-plugin以及物料packages/materials/type-editor類型編輯器即可在節(jié)點表單中引用上游節(jié)點輸出的變量并獲得類型約束——這是 AI 工作流中數(shù)據(jù)沿邊流動體驗的關(guān)鍵一環(huán)。五、編輯器集成范式自由布局 Demo 的編輯器寫法官方 Demo 的編輯器入口非常短小是理解 FlowGram 集成方式的最好樣本。apps/demo-free-layout/src/editor.tsx 全文核心如下import { DockedPanelLayer } from flowgram.ai/panel-manager-plugin; import { EditorRenderer, FreeLayoutEditorProvider } from flowgram.ai/free-layout-editor; import flowgram.ai/free-layout-editor/index.css; import { nodeRegistries } from ./nodes; import { initialData } from ./initial-data; import { useEditorProps } from ./hooks; export const Editor () { const editorProps useEditorProps(initialData, nodeRegistries); return ( div classNamedoc-free-feature-overview FreeLayoutEditorProvider {...editorProps} div classNamedemo-container DockedPanelLayer EditorRenderer classNamedemo-editor / /DockedPanelLayer /div /FreeLayoutEditorProvider /div ); };其中三個關(guān)鍵構(gòu)件FreeLayoutEditorProvider自由布局編輯器的 Provider承載畫布上下文、節(jié)點注冊表與初始數(shù)據(jù)其內(nèi)部通過free-layout-preset預置默認插件集preset 目錄見 packages/client/free-layout-editor/src/preset組件實現(xiàn)位于 packages/client/free-layout-editor/src/components。EditorRenderer真正渲染畫布的組件DockedPanelLayer來自flowgram.ai/panel-manager-plugin負責節(jié)點配置面板等浮層的?？抗芾?。useEditorProps(initialData, nodeRegistries)這一 Hook位于apps/demo-free-layout/src/hooks把初始畫布數(shù)據(jù)initial-data.ts與節(jié)點注冊表上一節(jié)列出的 15 類節(jié)點組裝成 Provider 所需 props。換言之集成 FlowGram 自由布局編輯器的標準動作就是注冊節(jié)點 → 準備初始數(shù)據(jù) → 用 Provider 包裹 Renderer。固定布局側(cè)flowgram.ai/fixed-layout-editor遵循同樣的 Provider/Renderer 模式差異在于布局模型與復合節(jié)點能力。六、倉庫工程全景monorepo 結(jié)構(gòu)與配套工具圍繞 README 描述的能力倉庫按如下層次組織均出自 rush.json 的項目清單分層目錄代表包畫布引擎packages/canvas-enginecore、document、renderer、free-layout-core、fixed-layout-core節(jié)點引擎packages/node-enginenode、form-core、form變量引擎packages/variable-enginevariable-core、variable-layout、json-schema運行時packages/runtimeruntime-interface、runtime-js、runtime-nodejs客戶端編輯器packages/clienteditor、free-layout-editor、fixed-layout-editor、playground-react插件packages/pluginsfree-lines-plugin、free-snap-plugin、free-group-plugin、minimap-plugin、export-plugin、shortcuts-plugin、test-run-plugin等 30 余個物料packages/materialsform-materials、form-antd-materials、fixed-semi-materials、type-editor、coze-editor通用基礎(chǔ)packages/commonutils、reactive、command、history、history-storage、i18n示例應(yīng)用apps/demo-*9 個 demofree/fixed 布局、node-form、materials、nextjs、nextjs-antd、react-16、vite、playgroundE2E 測試e2ee2e/fixed-layoutdrag、drawer、layout、node、testrun、validate、variable 等 Playwright 用例、e2e/free-layout值得注意的兩點工程事實運行時獨立成層packages/runtime同時提供瀏覽器端runtime-js與 Node.js 端runtime-nodejs運行時并通過runtime-interface定義契約說明工作流執(zhí)行能力與畫布編輯能力是解耦的——畫布產(chǎn)出的是可序列化的工作流數(shù)據(jù)執(zhí)行交給運行時。CLI 工具鏈除create-app外倉庫還提供flowgram.ai/cliapps/cli/src/index.ts內(nèi)置四個子命令create-app創(chuàng)建項目、materials同步物料到項目支持--refresh-project-imports、--target-material-root-dir、--select-multiple選項、find-used-materials查找項目中已使用的物料、update-version批量更新項目中的 flowgram 版本。這套工具面向從官方物料庫按需取材的開發(fā)模式。七、文檔體系與多語言支持本倉庫自帶完整文檔站點工程 apps/docs基于 Rspress 構(gòu)建內(nèi)容分中文apps/docs/src/zh135 篇 MDX與英文apps/docs/src/en兩套覆蓋與 README 章節(jié)清單一致的十大板塊快速入門自由畫布固定畫布表單變量素材materials運行時進階指南API 參考獲取支持與貢獻指南文檔中的代碼示例還通過 apps/docs/components/tsx-editor.tsx 等組件做了交互式處理并在apps/docs/scripts/auto-generate.ts中支持示例代碼的自動生成。八、生態(tài)采用與參與方式README 列出了采用 FlowGram 的開源項目可作為集成參考Coze Studio一體化 AI Agent 開發(fā)工具NNDeploy基于工作流的多平臺 AI 部署工具Certimate借助可視化工作流自動申請與部署 SSL 證書的開源工具。參與渠道方面問題反饋走倉庫 Issues貢獻流程可參考倉庫根目錄的 CONTRIBUTING.md開發(fā)約束見 AGENTS.md 與 CLAUDE.md文檔的多語言版本英文、西班牙文、俄文、葡萄牙文、德文、日文分別位于 README.md、README_ES.md、README_RU.md、README_PT.md、README_DE.md、README_JA.md。小結(jié)FlowGram.AI 的價值在于把AI 工作流平臺拆解為可獨立取用的四層能力——畫布引擎、表單引擎、變量引擎與運行時——并以 30 余個插件包和 9 個可運行的 demo 工程證明其組合方式。上手路徑始終是一條命令npx flowgram.ai/create-applatest加三步運行深入路徑則是沿著 demo-free-layout 的Provider → Renderer → DockedPanelLayer集成范式逐包閱讀packages/canvas-engine、packages/node-engine、packages/variable-engine與packages/runtime的源碼最終把這套框架組裝進自己的平臺。贊分享前端低代碼工作流自動化流程編排【免費下載鏈接】flowgram.aiFlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.項目地址https://gitcode.com/gh_mirrors/fl/flowgram.ai點擊查看免費下載相關(guān)推薦FlowGram用可組合的視覺化工作流開發(fā)框架搭建你自己的 AI 工作流平臺FlowGram用可組合的視覺化工作流開發(fā)框架搭建你自己的 AI 工作流平臺 本篇以 FlowGram 的官方 README README_ES.md ht前端低代碼工作流自動化流程編排FlowGram用于構(gòu)建 AI 工作流平臺的工作流開發(fā)框架FlowGram用于構(gòu)建 AI 工作流平臺的工作流開發(fā)框架 FlowGram 是一個可組合、可視化、易于集成且可擴展的工作流開發(fā)框架與工具集目標是幫助開發(fā)者前端低代碼工作流自動化流程編排mediasoup-client 數(shù)據(jù)通道實戰(zhàn)produceData 與 consumeData 實現(xiàn)實時消息傳輸mediasoup client 數(shù)據(jù)通道實戰(zhàn)produceData 與 consumeData 實現(xiàn)實時消息傳輸 在 WebRTC 應(yīng)用中除了音視頻流實上一篇Yandex Music App 開源項目教程下一篇Ninja性能優(yōu)化秘籍10個技巧讓你的Web應(yīng)用飛起來 創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考