Flowable
是一个使用 Java 编写的「轻量级业务流程引擎」。Flowable
流程引擎可用于部署「BPMN 2.0」流程定义(用于定义流程的行业 XML 标准), 创建这些流程定义的流程实例,进行查询,访问运行中或历史的流程实例与相关数据等等。
具体可以查看Flowable 学习笔记[1]。
了解了Flowable
,接下来具体学习下这里提到的「BPMN」是什么。
「业务流程模型注解」(Business Process Modeling Notation - BPMN)是业务流程模型的一种标准图形注解。这个标准是由「对象管理组」(Object Management Group - OMG)维护的。
BPMN 规范的 2.0 版本允许添加精确的技术细节在「BPMN 的图形和元素」中,同时制定 BPMN 元素的「执行语法」。通过使用「XML 语言」来指定业务流程的可执行语法, BPMN 规范已经演变为业务流程的语言, 可以执行在任何兼容 BPMN2 的流程引擎中, 同时依然可以使用强大的图形注解。
可使用 BPMN 表示内部和外部过程及协作,以帮助确定业务流程内的效率和问题。BPMN 图提供业务模型中的所有项目干系人(从业务分析员、开发者到业务经理)都可理解的常规表示法。
BPMN 的基本对象包括以下几类:
BPMN的基本对象
下面是一个业务流程图的例子:
业务流程图
BPMN 2.0(Business Process Model and Notation)
BPMN 2.0 规范[2]这篇文章详细的介绍了相关规范,可以访问链接进行学习。
了解了「BPMN」基本对象,那怎么样才能进行可视化操作呢?这里要用到BPMN.js[3],可以很方便的将bpmn-js
集成进 vue 项目,可以访问官方 demo 页[4]进行体验。
核心用法如下:
import BpmnViewer from 'bpmn-js';
import testXML from './test.xml';
const viewer = new BpmnViewer({ container: '#canvas' });
viewer.importXML(testXML, function(err) {
if (err) {
console.log('error rendering', err);
} else {
console.log('we are good!');
}
});
通过构造函数指定DOM
容器,然后引入xml
文件就可以进行绘制。具体的用法等实操过后,再进行记录。
当使用可视化工具制作好业务流程后,我们可以将流程保存为xml
文件。大致流程如下:
import Modeler from 'bpmn-js/lib/Modeler'
this.modeler = new Modeler({ container: '#canvas' });
handleExportXmlAction() {
const _this = this
this.modeler.saveXML({format: true}, function (err, xml) {
// xml就是需要保存的文件流
// 具体的下载细节
})
},
本文大致介绍了BPMN
的概念和规范,方便我们在后续的开发中有的放矢。并且介绍了如何使用bpmn-js
来绘制业务流程。不仅支持导入、导出,还支持「Undo」、「Redo」。
BPMN 的概念非常多,元素就包括几十种,先学会使用最基本的元素,再扩大范围进行深入,这样更容易上手。
后续会将bpmn-js
相关知识进行沉淀与总结,持续更新中。
[1]
Flowable 学习笔记: https://juejin.cn/post/6844904158231789582
[2]
BPMN 2.0 规范: https://juejin.cn/post/6941989026711175182
[3]
BPMN.js: https://bpmn.io/toolkit/bpmn-js/
[4]
官方 demo 页: https://demo.bpmn.io/new