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

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

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

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

1.flowchart.js

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

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

2.jquery.flowchart.js

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

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

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

3.Flowy

https://github.com/alyssaxuu/flowy

Flowy是一個可以使創建具有流程圖功能的WebApps成為一項非常簡單的任務。通過在項目中實現該庫，在幾分鐘內就可以構建自動化的思維導圖工具或簡單的編程平臺。

其主要特征包括：

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

4.Dgrm.net

https://github.com/AlexeyBoiko/DgrmJS

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

5.Drawflow

https://github.com/jerosoler/Drawflow

Drawflow是一個開源流程設計器，可用于輕松快速地創建數據流。

主要特征包括：

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

6.xyflow

https://github.com/xyflow/xyflow

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

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

7.GoJS

https://github.com/NorthwoodsSoftware/GoJS

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

GoJS以Canvas元素呈現在HTML 上（導出為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的免費開源的輕量級流程圖設計器。

10.React Flow Chart

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

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

11.REAFLOW

https://github.com/reaviz/reaflow

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

12.React Flow Chart Editor

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

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

13.React Flowchart Builder

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

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

其特征包括：

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

14.X-Flowchart-Vue

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

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