14 個開源 JavaScript 流程圖組件

作者：andflow 2024-08-16 18:48:45

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

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

在軟件開發中流程化設計有許多應用場景，例如：低代碼無代碼開發、辦公自動化任務編排、自動審核審批、流程化的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