bpmn是比较方便的绘制流程图的插件，官方demo https://github.com/bpmn-io/bpmn-js-examples
本文主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
前情提要
上文我们已经实现了在外部更改节点名。此时又有新玩法：在流程图中，根据节点状态为其标记不同颜色。例如：已完成：黄色，正在进行：绿色，本次我们通过两种方式来实现该需求。效果：
方式1：modeling.setColor
modeling.setColor接受两个参数：参数1：节点实例，可以是单个元素，也可是多个节点组成的数组，参数2：class类
let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(节点实例, { stroke: 'green', fill: 'yellow' });
方式2：Overlay
个人理解，overlay是通过定位方式在元素正上方添加一层带颜色的蒙板
const $overlayHtml = $('<div>').css({ width: shape.width, height: shape.height }); overlays.add(节点id, { position: {top: 0, left: 0}, html: $overlayHtml });
highlight-overlay：css中声明好的class类名
overlays.add将创建好的蒙板定位到指定节点位置，此时节点id就是目标节点的唯一身份！
注意事项
上述两种方式均能实现为节点添加颜色。但方式2有一点副作用，如果此时你为节点注册了点击事件，在节点被点击的时候要做某些处理。此时方式2会使节点点击事件失效。
原因：方式2中，此时节点上方有一层蒙板，并且和节点等宽等高，相当于节点被蒙板完全覆盖。所以点击节点的时候，点击的是蒙版，不是节点。
不要慌，有解决办法！此时为蒙板注册了点击事件，将点击节点要做的操作给蒙板也来一份，哈哈
import $ from 'jquery'; // 引入jquery $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; // 此时temp就是蒙板下方的节点，要点击节点做什么，此刻尽管拿去用 ........ });
后续
上文代码都是片段，特此附上完整代码：老规矩：data中的chart变量流程图xml文件数据，由于行数过多，附在了附件中（点我！点我），使用时，将附件内容复制过来，赋值给chart即可运行！
<template> <div> <div></div> <div>看我！我是点击的节点名称啊~ <span>{{nodeName}}</span> </div> </div> </template> <script> import BpmnModeler from 'bpmn-js/lib/Modeler'; import camundaExtension from './resources/camunda'; import {tempDetail, saveCanvas} from '@api/processConfig'; import $ from 'jquery'; export default { name: 'index', data() { return { containerEl: null, bpmnModeler: null, nodeName: '', nodeList: [], // chart变量流程图xml文件数据，由于行数过多，附在了附件中，使用时，将附件整个赋值给chart即可 chart: '' }; }, mounted() { this.containerEl = document.getElementById('container'); this.bpmnModeler = new BpmnModeler({ container: this.containerEl, moddleExtensions: {camunda: camundaExtension} }); this.showChart(); }, methods: { // 流程图回显 showChart() { this.bpmnModeler.importXML(this.chart, (err) => { if (!err) { this.addEventBusListener(); this.setNodeColor(); } }); }, setNodeColor() { // 目的：为第一个节点添加绿色，为第二个节点添加黄色 // 实现步骤：1、找到页面里所有节点 const elementRegistry = this.bpmnModeler.get('elementRegistry'); this.nodeList = elementRegistry.filter ( (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask' ); // 此时得到的userTaskList 便是流程图中所有的节点的集合 console.log(this.nodeList); // 步骤2 ：为节点添加颜色 // 方式1 ：modeling.setColor(参数1：节点，可以是单个元素实例，也可是多个节点组成的数组，参数2：class类); let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(this.nodeList[0], { stroke: 'green', fill: 'yellow' }); // 方式2 ：添加蒙板 const overlays = this.bpmnModeler.get('overlays'); const shape = elementRegistry.get(this.nodeList[1].id); if (shape) { const $overlayHtml = $('<div>').css({ width: shape.width, height: shape.height }); overlays.add(this.nodeList[1].id, { position: {top: 0, left: 0}, html: $overlayHtml }); } // 此方法为了解决方式2造成的节点点击事件失效问题，如果采用方式1，可忽略此方法 this.overlayClick(); }, overlayClick() { $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; this.nodeName = temp ? temp.businessObject.name : ''; }); }, addEventBusListener() { const eventBus = this.bpmnModeler.get('eventBus'); // 为节点注册点击事件，点击节点，下方显示点击的节点名称 eventBus.on('element.click', (e) => { const {element} = e; if (!element.parent) return; if (!e || element.type === 'bpmn:Process') { return false; } else { this.nodeName = element.businessObject.name; } }); } } }; </script> <style lang="scss"> .containerBox { height: calc(100vh - 220px); position: relative; #container { height: calc(100% - 50px); } .highlight-overlay { background-color: green; opacity: 0.4; border-radius: 10px; } } </style>