据官网介绍,bpmn.js 作为符合 BPMN 2.0 标准 XML 文件的 阅读器(Viewer)和 编辑器(editor),可以用在 浏览器 中创建、嵌入和扩展 BPMN 2.0 文件,也可以独立使用或将其集成到应用程序中。该库内部的核心代码全部由 JavaScript 编写,并且只包含 BPMN 2.0 图文件的相关操作,所以可以脱离后端应用独立运行。
那么什么是 BPMN 2.0
BPMN(Business Process Modeling Notation,业务流程建模符号)是一种用于描述业务流程的标准化建模语言。它通过图形符号及规则,帮助企业建模、分析和优化各种业务流程。BPMN有两个主要版本:BPMN 1.0和BPMN 2.0。BPMN 1.0规范由标准组织BPMI(后并入到OMG)于2004年5月发布;BPMN 2.0标准由OMG于2011年推出。
https://www.omg.org/spec/BPMN/2.0/
BPMN的主要意义在于其作为一个标准,业务相关者都按照这个标准来绘制业务流程图,能够减少各方对于流程图的理解歧义,从而达到高效协作的目的
BPMN包含以下四类基本元素
流对象(Flow Objects):包括事件、活动、网关,是BPMN中的核心元素
连接对象(Connecting Objects):包括顺序流(Sequential flow)、消息流(Message flow)、关联(connecting)
泳道(Swimlanes):包括池(Pool)和道(Lane)两种类型
人工信息(Artifacts):包括数据对象(Data Object)、组(Group)、注释(Text Annotation)
BPMN中的核心元素
事件(Events)
事件用来表明流程的生命周期中发生了什么事。事件总是画成一个圆圈, 在BPMN 2.0中事件有两大分类:
捕获(Catching)事件。当流程执行到该事件, 它会中断执行,等待被触发
抛出(Throwing))事件。当流程执行到该事件, 抛出一个结果
网关(Gateways)
Gateway是BPMN2规范中的流程定义元素,中文可称为“网关”、“决策”、“判断”。网关用来控制流程的执行流向,当在拆分路径时产生令牌,在合并路径时消费令牌。常用网关可分为排他网关(XOR)、并行网关(AND)和包容网关(OR)。
活动(Activities)
活动(Activities)是业务流程定义的核心元素,中文可称为“活动”、“节点”、“步骤”。一个活动可以是流程中一个基本处理单元(如人工任务、服务任务),也可以是一个组合单元(如外部子流程、嵌套子流程)。
bpmn-js
bpmn-js就是基于BPMN标准实现的一套渲染工具包和web建模器,以下系列文章将会介绍我的使用过程
在HTML文件中引入JS/CSS资源文件
xml
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:startEvent id="StartEvent_1" /></bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="192" y="82" width="36" height="36" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>全栈开发ck - BPMNJS</title>
<!-- 引入BPMN-JS的CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/bpmn-font/css/bpmn.css" />
</head>
<body>
<div id="canvas" style="height:80vh;"></div>
<!-- 引入BPMN-JS的JS文件 -->
<script src="https://unpkg.com/bpmn-js@7.3.0/dist/bpmn-modeler.development.js"></script>
<script>
var diagramXML = `上面的xml复制到这里即可`
var bpmnModeler = new BpmnJS({
container: '#canvas'
});
bpmnModeler.importXML(diagramXML, function (err) {
if (err) {
return console.error('failed to load diagram', err);
}
});
</script>
</body>
</html>
浏览器访问会出现如下一个流程编辑器,可以在这里进行流程的编辑
bpmn-js有两种模式:Modeler模式和Viewer模式,在Modeler模式下可以对流程图进行编辑,而Viewer模式则不能,仅作为展示用
viewer模式相对简单,无需引入CSS文件,只需引入一个JS即可
<script src="https://unpkg.com/bpmn-js@7.3.0/dist/bpmn-viewer.development.js"></script>
通常在流程执行阶段的展示用Viewer模式,配合节点颜色设置让用户清晰的看到当前流程的执行过程和状态
VUE中使用
更多的时候我们可能会在VUE项目中使用,首先安装bpmn-js插件
npm install bpmn-js --save
安装完成后就可以开始使用bpmn-js了,首先要引入bpmn-js的CSS,修改src/main.js文件
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
然后编写bpmn-modeler.vue文件,文件位于src/views/bpmn-modeler.vue
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "../mock/xmlStr";
export default {
name: "fullStack-ck",
mounted() {
this.init();
},
data() {
return {
bpmnModeler: null,
container: null,
canvas: null
};
},
methods: {
init() {
const canvas = this.$refs.canvas;
this.bpmnModeler = new BpmnModeler({
container: canvas
});
this.createNewDiagram();
},
createNewDiagram() {
try {
const result = this.bpmnModeler.importXML(xmlStr);
const { warnings } = result;
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}
}
}
};
</script>
<style scoped>
.containers {
width: 100%;
height: calc(100vh - 82px);
}
.canvas {
width: 100%;
height: 100%;
}
</style>
这里引入了一个外部变量xmlStr,这个变量主要用来存放BPMN的XML数据,这里创建对应的src/mock/xmlStr.js文件
export var xmlStr = `上面的xml复制到这里即可`;
最后修改src/router/index.js文件添加路由
const routes = [
{
path: "/",
name: "编辑模式",
component: () => import("../views/bpmn-modeler.vue")
},
];
然后访问页面,就可看到流程编辑器,进行流程编辑等操作
以上为Modeler模式,如果想用Viewer模式的话,也非常简单,仅需将引入的Modeler改为Viewer即可
import BpmnViewer from "bpmn-js/lib/Viewer";
概念名词
在使用bpmn-js的过程中,经常会出现一些名词,了解他们有利于我们后续的使用和开发
画布中的元素叫element,element包含连线connection和形状shape,流程图是由shape和connection组成的,可以通过拖动左侧工具栏Palette来创建元素,点击元素会出现ContextPad工具箱,不同的元素会出现不同的ContextPad,可以通过ContextPad工具创建shape或connection,也可以修改元素type,添加注解,以及删除元素等操作
总结
想要打造一个好用的适合自己的流程编辑器,快去尝试下吧
https://github.com/bpmn-io/bpmn-js
Thank you for reading.
推荐阅读
• 前端埋点
欢迎关注我的公众号“全栈开发ck”,原创技术文章第一时间推送。