圖片

最近一直在研究可視化工作流, 也開源了自己基于 react-flow 實(shí)現(xiàn)的工作流編輯器:

圖片

開源地址:https://github.com/MrXujiang/flowmix-flow

接下來就來和大家分享一下市面上常用的開源工作流項(xiàng)目, 以及如何快速上手實(shí)現(xiàn)自己的工作流引擎.

市面上開源的工作流引擎都有哪些

圖片

在搜索引擎刷了一圈, 找到幾個(gè)還算比較靠譜的開源方案:

mxgraph

antv/g6

antv/x6

react-flow

logicFlow

接下來我會(huì)一一和大家介紹一下.

1. mxgraph

mxGraph 是一個(gè) JavaScript 圖表庫，可以快速創(chuàng)建交互式圖形和圖表應(yīng)用程序，這些應(yīng)用程序可以在主流瀏覽器中運(yùn)行。mxGraph 提供圖形繪制、圖形可視化、圖形交互、圖形布局、圖形分析等能力， 適用于工作流程圖、BPMN圖、網(wǎng)絡(luò)圖、UML圖、循環(huán)圖、組織結(jié)構(gòu)圖、MindMap圖、機(jī)架圖、甘特圖、信息圖、平面圖等繪制。

圖片

mxGraph創(chuàng)建于2005年，作為商業(yè)項(xiàng)目一直持續(xù)到2016年，2016年創(chuàng)建者以 Apache 2.0 開源協(xié)議在 GitHub 上公布源碼。

github地址: https://github.com/jgraph/mxgraph 文檔地址: http://jgraph.github.io/mxgraph/docs/js-api

我們熟悉的 draw.io 就是基于這個(gè)庫來實(shí)現(xiàn)的, 驚不驚喜, 意不意外~

2. antv/g6

antv/g6 是我4年前在公司項(xiàng)目中使用過的, 雖然當(dāng)時(shí)文檔非?！半y啃”, 好在后面把技術(shù)攻克了, 項(xiàng)目也順利上線, 所以這里給大家分享一下. 它是阿里開源的一款圖形引擎, 我們可以使用它實(shí)現(xiàn)各種圖編輯器:

圖片

不過我覺得最近更新的版本中對(duì)老版本做了毀滅性升級(jí), 導(dǎo)致老項(xiàng)目可能會(huì)出現(xiàn)升級(jí)成本, 加上文檔中一些API都是過時(shí)的, 所以建議官方團(tuán)隊(duì)對(duì)文檔準(zhǔn)確性和及時(shí)性提供一定的保障.

github地址: https://github.com/antvis/G6

3. antv/x6

antv/x6 是一款流程編排解決方案, 之前的項(xiàng)目中雖然也使用過, 但是個(gè)人覺得靈活度還是不夠, 感興趣的朋友也可以參考研究一下:

圖片

github地址: https://github.com/antvis/X6

4. react-flow

圖片

react-flow 是我用下來使用體驗(yàn)最好的一款流程引擎, 從性能和靈活度上, 我覺得都非常適合作為底層流程引擎來使用, 所以我今年花了3個(gè)月的時(shí)間研究這款項(xiàng)目, 也設(shè)計(jì)了一款工作流引擎, 同時(shí)基于自己的實(shí)踐, 開源了一款工作流編輯器:

圖片

開源地址:

https://github.com/MrXujiang/flowmix-flow

我強(qiáng)烈推薦大家學(xué)習(xí)一下這款開源項(xiàng)目.

5. logicFlow

圖片

logicFlow 是滴滴團(tuán)隊(duì)開源的一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點(diǎn)自定義、插件等拓展機(jī)制。LogicFlow 支持前端自定義開發(fā)各種邏輯編排場(chǎng)景，如流程圖、ER圖、BPMN流程等。在工作審批流配置、機(jī)器人邏輯編排、無代碼平臺(tái)流程配置都有較好的應(yīng)用。

雖然早期版本我之前體驗(yàn)了還是很難滿足我的需求, 但是最新的版本提供了更靈活的配置, 所以大家感興趣也可以嘗試一下~

github地址: https://github.com/didi/LogicFlow

工作流引擎的應(yīng)用場(chǎng)景

這里分享一下我對(duì)工作流應(yīng)用的一些看法.

1. OA審批流程

圖片

從我們用的辦公軟件比如釘釘, 飛書, 里面有各種審批, 其實(shí)都可以用可視化工作流來配置, 工作流目前在OA領(lǐng)域的應(yīng)用我覺得是最明顯的.

2. AI領(lǐng)域的Workflow

圖片

這兩年AI無疑是一個(gè)非常熱門的話題, 業(yè)界比較知名的AI應(yīng)用 Dify, 底層的工作流就是采用React-flow 來實(shí)現(xiàn), 所以我們可以基于workflow, 來構(gòu)建我們的AI應(yīng)用.

3. 低代碼/零代碼產(chǎn)品的流程引擎

圖片

這塊也是我主要研究的方向, 目前很多知名低代碼平臺(tái)基本上都配備的流程引擎, 來實(shí)現(xiàn)業(yè)務(wù)邏輯的可視化設(shè)計(jì).