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

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

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

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

01

flowchart.js

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

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

02

jquery.flowchart.js

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

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

• 繪制框（稱為運(yùn)算符）和它們之間的連接。

• 提供了方法，以便最終用戶可以通過添加/移動/刪除操作符，創(chuàng)建/刪除它們之間的連接來編輯流程圖。

• 開發(fā)人員可以保存/加載流程圖。

• 操作符和鏈接可以使用CSS和插件參數(shù)進(jìn)行自定義。

• 有些方法允許您添加高級功能，例如平移縮放視圖或使用拖放添加操作符。

03

Flowy

https://github.com/alyssaxuu/flowy

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

其主要特征包括：

• 響應(yīng)式拖放

• 自動捕捉

• 自動滾動

• 塊重新排列

• 刪除塊

• 塊自動對中

• 有條件捕捉

• 條件塊刪除

• 導(dǎo)入保存的文件

• 移動的支持

• Vanilla JavaScript（無依賴）

04

Dgrm.net

https://github.com/AlexeyBoiko/DgrmJS

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

05

Drawflow

https://github.com/jerosoler/Drawflow

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

主要特征包括：

• 可拖動節(jié)點(diǎn)

• 多個輸入/輸出

• 多個連接

• 刪除節(jié)點(diǎn)和連接

• 添加/刪除輸入/輸出

• 重新路由連接

• 節(jié)點(diǎn)上的數(shù)據(jù)同步

• 放大/縮小

• 清除數(shù)據(jù)模塊

• 支撐模塊

• 編輯器模式edit、fixed或view

• 支持導(dǎo)入/導(dǎo)出數(shù)據(jù)

• 支持事件

• 支持移動端

• Vanilla JavaScript（無依賴）

• 基于NPM

• 支持Vue組件和Nuxt

06

xyflow

https://github.com/xyflow/xyflow

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

這里有許多這個庫開發(fā)的Demo：

https://reactflow.dev/showcase

07

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瀏覽器中運(yùn)行，也可以在Node或Puppeteer中運(yùn)行。GoJS圖由模型支持，通常通過JSON格式的文本保存和加載。

在下面URL里可以看到GoJS 各種各樣的Demo：

https://gojs.net/latest/samples/index.html

08

React Diagrams

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

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

09

Flowchart React

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

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

10

React Flow Chart

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

React Flow Chart是一個免費(fèi)開源的、靈活的、無狀態(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

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

其特征包括：

• 支持不同形狀的節(jié)點(diǎn)。

• 支持添加/刪除/移動節(jié)點(diǎn)

• 支持添加/刪除/重塑節(jié)點(diǎn)之間的鏈接

• 支持啟用/禁用添加/編輯/刪除鏈接

• 支持縮放和平移

• 原始或鍵入的輸入/輸出

14

X-Flowchart-Vue

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

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