流程，在人類社會(huì)運(yùn)作中無(wú)處不在，我們每天的上班的工作、銀行的交易、做菜的過(guò)程、穿衣服的過(guò)程，萬(wàn)事萬(wàn)物都有一定的運(yùn)作流程，甚至人類的生老病死都是個(gè)流程。軟件的執(zhí)行過(guò)程更是個(gè)流程，雖然在許多軟件中存在依據(jù)規(guī)則的執(zhí)行方法，也存在根據(jù)環(huán)境、數(shù)據(jù)等外部信息觸發(fā)的事件，但是從軟件全局來(lái)看，仍然是遵循著一定的業(yè)務(wù)流程，這些規(guī)則或者觸發(fā)器是整體流程中功能點(diǎn)。

在軟件開(kāi)發(fā)中流程化設(shè)計(jì)有許多應(yīng)用場(chǎng)景，例如：低代碼無(wú)代碼開(kāi)發(fā)、辦公自動(dòng)化任務(wù)編排、自動(dòng)審核審批、流程化的AI Agent（類似Dify、Coze）等等。

一些比較流行的開(kāi)源流程圖組件，如：flowchart.js、xyflow、GoJS、Dgrm.net等，這些組件可以以可視化的方式將流程設(shè)計(jì)器集成到Web應(yīng)用中，能夠大大提高系統(tǒng)的可用性、易用性，并且更加直觀以及用戶友好。

下面是推薦的幾個(gè)基于web的開(kāi)源流程設(shè)計(jì)組件，可根據(jù)需求選擇合適的組件集成到你的系統(tǒng)中。

1.flowchart.js

https://github.com/adrai/flowchart.js

flowchart.js是可以在瀏覽器和終端中運(yùn)行的流程圖DSL和SVG渲染器。這個(gè)設(shè)計(jì)器的節(jié)點(diǎn)和連接是分開(kāi)定義的，這樣節(jié)點(diǎn)可以重用，連接可以快速更改。也可以在DSL中對(duì)節(jié)點(diǎn)和連接樣式進(jìn)行更改。

2.jquery.flowchart.js

https://github.com/sdrdis/jquery.flowchart

jquery.flowchart.js是一個(gè)開(kāi)源的jQueryUI流程圖插件。主要功能包括：

• 繪制框（稱為運(yùn)算符）和它們之間的連接。
• 提供了方法，以便最終用戶可以通過(guò)添加/移動(dòng)/刪除操作符，創(chuàng)建/刪除它們之間的連接來(lái)編輯流程圖。
• 開(kāi)發(fā)人員可以保存/加載流程圖。
• 操作符和鏈接可以使用CSS和插件參數(shù)進(jìn)行自定義。
• 有些方法允許您添加高級(jí)功能，例如平移縮放視圖或使用拖放添加操作符。

3.Flowy

https://github.com/alyssaxuu/flowy

Flowy是一個(gè)可以使創(chuàng)建具有流程圖功能的WebApps成為一項(xiàng)非常簡(jiǎn)單的任務(wù)。通過(guò)在項(xiàng)目中實(shí)現(xiàn)該庫(kù)，在幾分鐘內(nèi)就可以構(gòu)建自動(dòng)化的思維導(dǎo)圖工具或簡(jiǎn)單的編程平臺(tái)。

其主要特征包括：

• 響應(yīng)式拖放
• 自動(dòng)捕捉
• 自動(dòng)滾動(dòng)
• 塊重新排列
• 刪除塊
• 塊自動(dòng)對(duì)中
• 有條件捕捉
• 條件塊刪除
• 導(dǎo)入保存的文件
• 移動(dòng)的支持
• Vanilla JavaScript（無(wú)依賴）

4.Dgrm.net

https://github.com/AlexeyBoiko/DgrmJS

Dgrm.net是一個(gè)純JS的流程圖編輯器。適用于臺(tái)式機(jī)，手機(jī)和平板電腦。沒(méi)有依賴性。

5.Drawflow

https://github.com/jerosoler/Drawflow

Drawflow是一個(gè)開(kāi)源流程設(shè)計(jì)器，可用于輕松快速地創(chuàng)建數(shù)據(jù)流。

主要特征包括：

• 可拖動(dòng)節(jié)點(diǎn)
• 多個(gè)輸入/輸出
• 多個(gè)連接
• 刪除節(jié)點(diǎn)和連接
• 添加/刪除輸入/輸出
• 重新路由連接
• 節(jié)點(diǎn)上的數(shù)據(jù)同步
• 放大/縮小
• 清除數(shù)據(jù)模塊
• 支撐模塊
• 編輯器模式edit、fixed或view
• 支持導(dǎo)入/導(dǎo)出數(shù)據(jù)
• 支持事件
• 支持移動(dòng)端
• Vanilla JavaScript（無(wú)依賴）
• 基于NPM
• 支持Vue組件和Nuxt

6.xyflow

https://github.com/xyflow/xyflow

這是一個(gè)強(qiáng)大的開(kāi)源庫(kù)，可以基于React或Svelte開(kāi)發(fā)流程設(shè)計(jì)UI。這個(gè)庫(kù)開(kāi)箱即用并且無(wú)限定制。

這里有許多這個(gè)庫(kù)開(kāi)發(fā)的Demo：https://reactflow.dev/showcase

7.GoJS

https://github.com/NorthwoodsSoftware/GoJS

GoJS是一個(gè)可用于創(chuàng)建許多不同類型的交互式圖表，非常靈活，支持?jǐn)?shù)據(jù)可視化、繪圖工具和圖形編輯器等功能。支持的圖形包括：流程圖、組織結(jié)構(gòu)圖、業(yè)務(wù)流程BPMN、泳道、時(shí)間線、狀態(tài)圖、看板、網(wǎng)絡(luò)、思維導(dǎo)圖、sankey、家譜和基因圖、魚(yú)骨圖、平面圖、UML、決策樹(shù)、PERT圖表、甘特等數(shù)百個(gè)。GoJS包括許多內(nèi)置的布局，包括：樹(shù)布局、熱力圖、圓形和分層有向圖布局，也支持自定義布局。

GoJS以Canvas元素呈現(xiàn)在HTML 上（導(dǎo)出為SVG或圖像格式）或直接作為SVG DOM。GoJS可以在Web瀏覽器中運(yùn)行，也可以在Node或Puppeteer中運(yùn)行。GoJS圖由模型支持，通常通過(guò)JSON格式的文本保存和加載。

在下面URL里可以看到GoJS 各種各樣的Demo：https://gojs.net/latest/samples/index.html

8.React Diagrams

https://github.com/projectstorm/react-diagrams

React Diagrams是一個(gè)用React寫(xiě)的非常精簡(jiǎn)的工作流圖形庫(kù)。

9.Flowchart React

https://github.com/joyceworks/flowchart-react

這是一個(gè)適用于React.js的免費(fèi)開(kāi)源的輕量級(jí)流程圖設(shè)計(jì)器。

10.React Flow Chart

https://github.com/MrBlenny/react-flow-chart

React Flow Chart是一個(gè)免費(fèi)開(kāi)源的、靈活的、無(wú)狀態(tài)的、聲明式的React流程圖庫(kù)。

11.REAFLOW

https://github.com/reaviz/reaflow

REAFLOW是一個(gè)用于構(gòu)建靜態(tài)或交互式編輯器的模塊化圖表引擎。該庫(kù)功能豐富且模塊化，允許顯示具有完全可定制性的復(fù)雜可視化。

12.React Flow Chart Editor

https://github.com/aislelabs/react-flowchart-editor

這個(gè)開(kāi)源流程圖編輯器支持窗口定位、縮放和工作區(qū)平移。簡(jiǎn)單的組件插件架構(gòu)，允許輕松定制。沒(méi)有額外的包依賴。

13.React Flowchart Builder

https://github.com/TaqBostan/react-flowchart-builder

這是一個(gè)免費(fèi)的輕量級(jí)流程圖組件。

其特征包括：

• 支持不同形狀的節(jié)點(diǎn)。
• 支持添加/刪除/移動(dòng)節(jié)點(diǎn)
• 支持添加/刪除/重塑節(jié)點(diǎn)之間的鏈接
• 支持啟用/禁用添加/編輯/刪除鏈接
• 支持縮放和平移
• 原始或鍵入的輸入/輸出

14.X-Flowchart-Vue

https://github.com/OXOYO/X-Flowchart-Vue

一個(gè)基于G6和Vue的可視化圖形編輯器。