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