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

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

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

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

1.flowchart.js

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

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

2.jquery.flowchart.js

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

jquery.flowchart.js是一個開源的jQueryUI流程圖插件。主要功能包括：

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

3.Flowy

https://github.com/alyssaxuu/flowy

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

其主要特征包括：

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

4.Dgrm.net

https://github.com/AlexeyBoiko/DgrmJS

Dgrm.net是一個純JS的流程圖編輯器。適用于臺式機，手機和平板電腦。沒有依賴性。

5.Drawflow

https://github.com/jerosoler/Drawflow

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

主要特征包括：

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

6.xyflow

https://github.com/xyflow/xyflow

這是一個強大的開源庫，可以基于React或Svelte開發(fā)流程設(shè)計UI。這個庫開箱即用并且無限定制。

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

7.GoJS

https://github.com/NorthwoodsSoftware/GoJS

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

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

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

8.React Diagrams

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

React Diagrams是一個用React寫的非常精簡的工作流圖形庫。

9.Flowchart React

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

這是一個適用于React.js的免費開源的輕量級流程圖設(shè)計器。

10.React Flow Chart

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

React Flow Chart是一個免費開源的、靈活的、無狀態(tài)的、聲明式的React流程圖庫。

11.REAFLOW

https://github.com/reaviz/reaflow

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

12.React Flow Chart Editor

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

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

13.React Flowchart Builder

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

這是一個免費的輕量級流程圖組件。

其特征包括：

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

14.X-Flowchart-Vue

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

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