最好用的流程編輯器bpmn-js系列之基本使用

coffee發表於2020-09-17
JS

最好用的流程編輯器bpmn-js系列文章

BPMN（Business Process Modeling Notation）是由業務流程管理倡議組織BPMI（The Business Process Management Initiative）開發的一套標準的業務流程建模符號規範。其目的是為使用者提供一套容易理解的標準符號，這些符號作為BPMN的基礎元素，將業務流程建模簡單化、圖形化，將複雜的建模過程視覺化，讓業務建模者、業務實施人員、管理監督人員對BPMN描述的業務流程都有一個更加清晰明瞭的瞭解。

BPMN的主要意義在於其作為一個標準，業務相關者都按照這個標準來繪製業務流程圖，能夠減少各方對於流程圖的理解歧義，從而達到高效協作的目的

BPMN包含以下四類基本元素

  • 流物件（Flow Objects）：包括事件、活動、閘道器，是BPMN中的核心元素
  • 連線物件（Connecting Objects）：包括順序流、訊息流、關聯
  • 泳道（Swimlanes）：包括池和道兩種型別
  • 人工資訊（Artifacts）：包括資料物件、組、註釋

bpmn-js就是基於BPMN標準實現的一套渲染工具包和web建模器，以下系列文章將會介紹我的使用過程

基本使用

bpmn-js的使用非常簡單，我們可以在VUE專案中使用，或者是直接在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>運維咖啡吧 - 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 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>

瀏覽器訪問會出現如下一個流程編輯器，可以在這裡進行流程的編輯

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專案中使用，為了展示清晰，這裡先通過vue-cli腳手架建立一個vue專案

vue create ops-coffee-bpmn
cd ops-coffee-bpmn

原始的目錄結構大概是這個樣子的

安裝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: "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>

這裡引入了一個外部變數xmlStr，這個變數主要用來存放BPMN的XML資料，這裡建立對應的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")
  },
];

然後訪問頁面，就可看到流程編輯器，進行流程編輯等操作

以上為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，新增註解，以及刪除元素等操作

寫在最後

接觸bpmn-js不久，且第一次用VUE，邊學邊寫，文章難免出錯，各位多多包含。想要打造一個好用的適合自己的流程編輯器，需要了解的內容比較多，bpmn-js會分多篇文章來介紹，這是本系列的第一篇，下一篇介紹bpmn-js的資料儲存等內容，歡迎關注

部分小夥伴對流程編輯器不瞭解，或是對BPMN不瞭解，我搭建了個線上的Demo: https://bpmn.ops-coffee.cn，點選連結即可輕鬆體驗，建議PC端開啟效果更好

相關文章