工作流流程编辑器的几种解决方案

前言

近阶段参与的项目需要集成工作流功能，在对比了市面上比较流行的极大框架后，最后不出意外应该是三个框架中的一个：Activiti、Flowable、Camunda。
这里先不讨论工作流驱动引擎部分，单单就工作流流程编辑器部分展开探讨。
上面三个工作流驱动引擎，都兼容BPMN 2.0格式的流程定义文件，关于BPMN 2.0具体详情，可以参考这里： https://www.bpmn.org/

方案

在早期，有不少的流程定义，是通过各种开发插件来编写的，如Eclipse插件或者IntellijIDEA插件，但是这种方式一般来说仅仅限于开发人员进行编辑修改，对于普通用户来说门槛比较高。
对于工作流的流程编辑器部分，出于用户体验方面考虑，比较人性化的方式是图形化的编辑界面，让普通用户采用所见即所得的方式进行编辑流程图。而现在也有不少开源的图形化编辑器解决方案。

1. bpmn-js

Camunda以及最新版的Activiti 7，都推荐该方案作为流程编辑器，bpmn-js官方地址：https://bpmn.io/ 。该站点不仅仅提供了开源的bpmn-js流程编辑器，同时还提供了dmn-js以及form-js编辑器。
官网对于bpmn-js的说明是：

Use bpmn-js to display BPMN 2.0 diagrams on your website.
Embed it as a BPMN 2.0 web modeler into your applications and customize it to suit your needs.

bpmn-js提供的组件可以说是十分丰富，比如StartEvent开始事件、EndEvent结束事件、Task任务、ExclusiveGateway互斥网关等等一系列组件，bpmn-js可以说是对BPMN 2.0支持最完善的一个流程编辑器组件。
当然缺点也有，个人感觉bpmn-js提供的组件过于繁杂，在国内的一些使用环境下可能根本都用不到。还有一点就是如果需要对bpmn-js进行定制开发，门槛相对较高，比如bpmn-js编辑器默认是不带有流程节点属性配置功能的，开发者需要另外单独实现此功能。

2. Flowable默认流程编辑器

Flowable包里，默认使用的编辑器似乎采用的是AngularJS开发的一个图形编辑器。界面如下：

可以看到Flowable流程编辑器也提供了比较丰富的组件，对于BPMN 2.0的支持也是十分的完善。并且Flowable流程编辑器对于流程节点的属性（如Execution listeners、Task Listeners等等属性）配置也提供了比较完善的支持。
确定是，我个人感觉这一套UI，似乎有一点点的过时。并且和bpmn-js一样提供的组件过于繁杂，大部分组件可能不太会用得上。

3. Logic Flow

LogicFlow是滴滴开源的一个流程编辑器组件。官方网站： http://logic-flow.org/ 。有以下特点（来自官方网站）：

🛠 高拓展性
兼容各种产品自定义的流程编辑需求，绝大部分模块以插件的形式实现，支持各模块自由插拔。
🚀 重执行
流程图能完备的表达业务逻辑，不受流程引擎限制。
🎯 专业
专注于业务自定义的流程图编辑框架

LogicFlow相对于前面两个框架，没有提供对应的图形节点组件，需要自己额外开发相关的图形组件，好在官方文档还算比较完善，开发起来难度不大。

4. 基于Antv/G6开发的流程编辑器

Antv/G6本是阿里Antv团队开源的一个可视化图形框架：

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

Antv/G6在图形可视化领域有着不俗的表现，其可以用来开发思维导图、缩进文件树图、知识图谱树图等等一系列可视化图。当然也可以用来开发流程图。
在Gitee以及Github上找到几个开源的流程编辑器，可以参考：

1. https://gitee.com/KAASE/workflow-designer
2. https://github.com/guozhaolong/wfd
3. 待补充…
   

上面几个流程编辑器是采用Antv/G6开发的，完成度相对较高，具有一定的参考价值。

写在后面

上面几个流程编辑器解决方案对于一些工作流相关开发人员还是值得学习的，有需要的可以参考学习。如果有其他的解决方案，欢迎在评论区交流。