由于之前的公司的项目中的工作流管理要用到流程图，而bpmn-js官方的文档是全英的而且使用的js框架是jQuery，可能是比较新的技术，官方也还在不断的更新，相关的文档或者资料很少很难找，只好自己不断爬坑填坑了。

什么是bpmn-js？

1.先从简单开始，能获取服务器上的流程图并显示出来：

安装相关的依赖都是必须的，可以在官方文档上查看，在这里就不详细讲了。

html: (界面很简单，这些都是必需的。)

js:

// 引入相关的依赖

import BpmnViewer from 'bpmn-js'

import BpmnModeler from 'bpmn-js/lib/Modeler'

import propertiesPanelModule from 'bpmn-js-properties-panel'

import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

export default {

data(){

return {

// bpmn建模器

bpmnModeler: null,

container: null,

canvas: null

}

},

methods:{

createNewDiagram() {

const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +

'\n' +

' \n' +

' \n' +

' SequenceFlow_0nrfbee\n' +

' \n' +

' \n' +

' SequenceFlow_0nrfbee\n' +

' SequenceFlow_00ho26x\n' +

' \n' +

' \n' +

' SequenceFlow_00ho26x\n' +

' SequenceFlow_18df8vb\n' +

' \n' +

' \n' +

' SequenceFlow_18df8vb\n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

'\n'

// 将字符串转换成图显示出来

this.bpmnModeler.importXML(bpmnXmlStr, function (err) {

if (err) {

console.error(err);

}

else {

// 这里还没用到这个，先注释掉吧

// that.success()

}

})

}

},

mounted(){

// 获取到属性ref为“content”的dom节点

this.container = this.$refs.content

// 获取到属性ref为“canvas”的dom节点

const canvas = this.$refs.canvas

// 建模，官方文档这里讲的很详细

this.bpmnModeler = new BpmnModeler({

container: canvas,

//添加控制板

propertiesPanel: {

parent: '#js-properties-panel'

},

additionalModules: [

// 左边工具栏以及节点

propertiesProviderModule,

// 右边的工具栏

propertiesPanelModule

],

moddleExtensions: {

camunda: camundaModdleDescriptor

}

});

this.createNewDiagram(this.bpmnModeler);

}

}

css: (记得引入样式，否则左边的工具栏无法显示T_T 别问我怎么知道的)

/*左边工具栏以及编辑节点的样式*/

@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';

/*右边工具栏样式*/

@import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

.containers{

position: absolute;

background-color: #ffffff;

width: 100%;

height: 100%;

}

.canvas{

width: 100%;

height: 100%;

}

.panel{

position: absolute;

right: 0;

top: 0;

width: 300px;

}

有图有真相

完整项目地址：