大家在開發OA辦公自動化、ERP、CRM、BPM、低程式碼平臺等專案的時候，經常用到流程引擎，目前主流的開源流程引擎有activiti、flowable、camunda。這幾個開源的流程引擎均基於BPMN2.0國際規範標準，其功能均比較強大，介面也很豐富。但涉及到人機互動介面大部分都需要定製開發，開源工作流引擎預設介面都不太適合中國專案使用要求。首先需要了解一下BPMN2.0規範是什麼，見下圖，更詳細的瞭解請百度“BPMN2.0模型規範標準”之類的關鍵詞。
本文重點介紹，基於activiti、flowable、camunda開源工作流引擎，如何選擇一個開源免費的流程設計器，進行整合和擴充套件開發，快速交付專案使用。
一、流程設計器開源元件bpmn-js
bpmn-js 是 BPMN 2.0 渲染工具包和 Web 模型。bpmn-js 正在努力成為 Camunda BPM 的一部分。bpmn-js 使用 Web 建模工具可以很方便的構建 BPMN 圖表，可以把 BPMN 圖表嵌入到你的專案中，容易擴充套件。bpmn-js是基於原生js開發，支援整合到vue、react等開源框架中，整合起來也比較簡單，而且與activiti、flowable、camunda開源工作流引擎無縫整合。使用bpmn-js也有缺點，由於bpmn-js底層依賴了畫圖工具diagram-js 和bpmn模型解析元件bpmn-moddle ，這兩個開源元件的原始碼比較複雜，一般前端開發人員很難搞定，功能和樣式擴充套件修改比較費勁。
官方網站：https://bpmn.io/
線上體驗：http://www.yunchengxc.com
原始碼解讀：https://juejin.cn/post/7117481147277246500
建議：專業的BPM專案選擇bpmn-js流程設計器，因為bpmn-js包含了全部BPMN 2.0的元素配置，設計的流程圖可以很複雜，尤其是流程事件和協作，非釘釘流程設計器或OA類工作流設計器可取代，比如下面這個基於事件的招聘面試流程。
二、仿釘釘流程設計器
阿里釘釘作為中國協同辦公的主流平臺，其中表單設計器和流程設計器的功能及互動風格，對國內的企業和使用者影響很大，一部分專業的低程式碼平臺/BPM廠商也推出了仿釘釘版流程設計器，也有一部分客戶提出流程設計器要改造程釘釘類的。在開源社群裡也有vue和react版本的仿釘釘流程設計器框架。
仿釘釘版流程設計器不能與activiti、flowable、camunda等開源流程引擎無法整合，因為釘釘版流程設計器生成的模型不是bpmn2.0標準規範，需要中間做轉化才可以，轉化可以是前端JS處理，也可以是後端Java處理，大部分公司是基於BPMN模型的工具類在Java後端進行處理的，這個處理相當於做一個介面卡，把A模型轉化成B模型，其工作量不小，而且複雜的模型轉化很容易出錯。
開源地址：https://github.com/StavinLi/Workflow-Vue3
線上體驗：https://stavinli.github.io/Workflow-Vue3/dist/index.html#/
建議：釘釘流程設計器尤其明顯的優點和缺點。優點是更符合業務人員操作習慣，使用起來比較容易理解，更適合簡單的人工審批流程，缺點是不能設計複雜的BPMN流程。如果系統的定位是簡單的辦公類需求，仿釘釘流程設計器是可取的，反之需要謹慎考慮。
三、基於G6的流程設計器
Antv G6本是阿里Antv團隊開源的一個視覺化圖形框架。G6 是一個簡單、易用、完備的圖視覺化引擎，它在高定製能力的基礎上，提供了一系列設計優雅、便於使用的圖視覺化解決方案。能幫助開發者搭建屬於自己的圖視覺化、圖分析、或圖編輯器應用。G6是繪圖方面也是可以選擇的，可以使用 canvas 或 svg 渲染，預設是Canvas，在視覺化及互動方面，G6是比較突出的，比jsplumb 更好用。
開源地址：https://github.com/guozhaolong/wfd-vue
體驗地址：https://guozhaolong.github.io/wfd-vue/
建議：bpmn-js 版流程設計器太專業太複雜，仿釘釘流程設計器太簡單使用場景太侷限，有沒有折中的方案？選擇一個好的圖畫工具自行開發流程設計器，即選擇Antv G6開源框架開發流程設計器就是好的方案，優點是畫圖功能比較強大，可按業務需求靈活定製。缺點是Antv G6的生成的流程圖模型與bpmn2.0模型不一致，也需要自己開發介面卡進行模組轉換。
四、其它開源流程設計器
還有其它開源版流程設計器，這裡不作重點介紹，感興趣的讀者請自行研究。
https://gitee.com/zhangyeping/vue-flow-design-plus
https://site.logic-flow.cn/docs/#/
https://site.logic-flow.cn/examples/#/gallery
https://jsplumbtoolkit.com/
https://gitee.com/gfqy/zsflow-editor
https://gitee.com/xiaoka2017/easy-flow
https://gitee.com/shenzhanwang/RuoYi-activiti