最好用的流程编辑器bpmn-js系列之基本使用_Javascript

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，添加注解，以及删除元素等操作