流程引擎

Activiti、Flowable 和 Camunda

image-20241022172903680

流程设计器整合:

img

Activiti: Github下载 Activiti 5.22 版本源码,Activiti 官方提供了 Web 版的流程设计工具 Activiti Modeler,可以直接整合到我们项目中,最后需要汉化。

img

img

Flowable:Flowable Modeler: 让具有建模权限的用户可以创建流程模型、表单、选择表与应用定义。flowable-ui自带的h2数据库,flowable-ui支持市面上的大多数数据库, 可以支持mysql

img

img

img

Camunda: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 ,这两个开源组件的源代码比较复杂,一般前端开发人员很难搞定,功能和样式扩展修改比较费劲。

img

仿钉钉流程设计器:界面美观。仿钉钉版流程设计器不能与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#/

img

G6的流程设计器:Antv G6本是阿里Antv团队开源的一个可视化图形框架。G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。G6是绘图方面也是可以选择的,可以使用 canvas 或 svg 渲染,默认是Canvas,在可视化及交互方面,G6是比较突出的,比jsplumb 更好用。

https://github.com/guozhaolong/wfd-vue

在线演示:https://guozhaolong.github.io/wfd-vue/

img

更多:

还有其它开源版流程设计器,这里不作重点介绍,感兴趣的读者请自行研究。

vue-flow-design-plus: https://gitee.com/zhangyeping/vue-flow-design-plus

LogicFlow(这个厉害:流程图编辑框架):https://site.logic-flow.cn/tutorial/about

Vue3 AntV X6 2.0流程设计器: vue3+AntV X6 2.0版本 完成的流程设计器。内控业务属性的系统流程审批使用,一些职能带、边条件前端表达式定义,节点属性审批策略、岗位、角色、审批人、处理功能等

easy-flow: 基于VUE+JsPlumb的流程设计器,演示地址

RuoYi-activiti: 打造最好用的OA数字化解决方案,基于Activiti6.0,集流程设计、流程部署、流程执行、任务办理、流程监控于一体的开源工作流开发平台。

img

参考文章:https://blog.csdn.net/wxz258/article/details/134514038