BPMN（Business Process Modeling Notation）是由業(yè)務(wù)流程管理倡議組織BPMI（The Business Process Management Initiative）開(kāi)發(fā)的一套標(biāo)準(zhǔn)的業(yè)務(wù)流程建模符號(hào)規(guī)范。其目的是為用戶提供一套容易理解的標(biāo)準(zhǔn)符號(hào)，這些符號(hào)作為BPMN的基礎(chǔ)元素，將業(yè)務(wù)流程建模簡(jiǎn)單化、圖形化，將復(fù)雜的建模過(guò)程視覺(jué)化，讓業(yè)務(wù)建模者、業(yè)務(wù)實(shí)施人員、管理監(jiān)督人員對(duì)BPMN描述的業(yè)務(wù)流程都有一個(gè)更加清晰明了的了解。
BPMN的主要意義在于其作為一個(gè)標(biāo)準(zhǔn)，業(yè)務(wù)相關(guān)者都按照這個(gè)標(biāo)準(zhǔn)來(lái)繪制業(yè)務(wù)流程圖，能夠減少各方對(duì)于流程圖的理解歧義，從而達(dá)到高效協(xié)作的目的
BPMN包含以下四類基本元素
- 流對(duì)象（Flow Objects）：包括事件、活動(dòng)、網(wǎng)關(guān)，是BPMN中的核心元素
- 連接對(duì)象（Connecting Objects）：包括順序流、消息流、關(guān)聯(lián)
- 泳道（Swimlanes）：包括池和道兩種類型
- 人工信息（Artifacts）：包括數(shù)據(jù)對(duì)象、組、注釋
bpmn-js就是基于BPMN標(biāo)準(zhǔn)實(shí)現(xiàn)的一套渲染工具包和web建模器，以下系列文章將會(huì)介紹我的使用過(guò)程
基本使用
bpmn-js的使用非常簡(jiǎn)單，我們可以在VUE項(xiàng)目中使用，或者是直接在HTML文件中引入JS/CSS資源文件，就像下邊這樣
<!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>運(yùn)維咖啡吧 - BPMNJS</title>
<!-- 引入BPMN-JS的CSS文件 -->
<link rel="stylesheet" />
<link rel="stylesheet" />
</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 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>`
var bpmnModeler = new BpmnJS({
container: '#canvas'
});
bpmnModeler.importXML(diagramXML, function(err) {
if (err) {
return console.error('failed to load diagram', err);
}
});
</script>
</body>
</html>瀏覽器訪問(wèn)會(huì)出現(xiàn)如下一個(gè)流程編輯器，可以在這里進(jìn)行流程的編輯
bpmn-js有兩種模式：Modeler模式和Viewer模式，在Modeler模式下可以對(duì)流程圖進(jìn)行編輯，而Viewer模式則不能，僅作為展示用
viewer模式相對(duì)簡(jiǎn)單，無(wú)需引入CSS文件，只需引入一個(gè)JS即可
<script src="https://unpkg.com/bpmn-js@7.3.0/dist/bpmn-viewer.development.js"></script>通常在流程執(zhí)行階段的展示用Viewer模式，配合節(jié)點(diǎn)顏色設(shè)置讓用戶清晰的看到當(dāng)前流程的執(zhí)行過(guò)程和狀態(tài)
VUE中使用
更多的時(shí)候我們可能會(huì)在VUE項(xiàng)目中使用，為了展示清晰，這里先通過(guò)vue-cli腳手架創(chuàng)建一個(gè)vue項(xiàng)目
vue create ops-coffee-bpmn
cd ops-coffee-bpmn原始的目錄結(jié)構(gòu)大概是這個(gè)樣子的
安裝bpmn-js
npm install bpmn-js --save安裝完成后就可以開(kāi)始使用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");然后編寫(xiě)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: "ops-coffee",
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>這里引入了一個(gè)外部變量xmlStr，這個(gè)變量主要用來(lái)存放BPMN的XML數(shù)據(jù)，這里創(chuàng)建對(duì)應(yīng)的src/mock/xmlStr.js文件
export var xmlStr = `<?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>`;最后修改src/router/index.js文件添加路由
const routes = [
{
path: "/",
name: "編輯模式",
component: () => import("../views/bpmn-modeler.vue")
},
];然后訪問(wèn)頁(yè)面，就可看到流程編輯器，進(jìn)行流程編輯等操作
以上為Modeler模式，如果想用Viewer模式的話，也非常簡(jiǎn)單，僅需將引入的Modeler改為Viewer即可
import BpmnViewer from "bpmn-js/lib/Viewer";概念名詞
在使用bpmn-js的過(guò)程中，經(jīng)常會(huì)出現(xiàn)一些名詞，了解他們有利于我們后續(xù)的使用和開(kāi)發(fā)
畫(huà)布中的元素叫element，element包含連線connection和形狀shape，流程圖是由shape和connection組成的，可以通過(guò)拖動(dòng)左側(cè)工具欄Palette來(lái)創(chuàng)建元素，點(diǎn)擊元素會(huì)出現(xiàn)ContextPad工具箱，不同的元素會(huì)出現(xiàn)不同的ContextPad，可以通過(guò)ContextPad工具創(chuàng)建shape或connection，也可以修改元素type，添加注解，以及刪除元素等操作
寫(xiě)在最后
接觸bpmn-js不久，邊學(xué)邊寫(xiě)，文章難免出錯(cuò)，各位多多包含。想要打造一個(gè)好用的適合自己的流程編輯器，需要了解的內(nèi)容比較多，bpmn-js會(huì)分多篇文章來(lái)介紹，這是本系列的第一篇，下一篇介紹bpmn-js的數(shù)據(jù)保存等內(nèi)容，歡迎關(guān)注
bpmn.js插件源碼：?GitHub - bpmn-io/bpmn-js: A BPMN 2.0 rendering toolkit and web modeler.文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-860835.html
Demo源碼地址：https://github.com/Mrs-Bean/bpmn-src.git文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-860835.html
到了這里，關(guān)于最好用的流程編輯器bpmn-js系列之基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
