vue里使用bpmn绘制流程图（一）

bpmn是比较方便的绘制流程图的插件，官方demo https://github.com/bpmn-io/bpmn-js-examples

安装

1.HTML中使用，通过script标签引入

<script src="https://unpkg.com/bpmn-js@5.0.3/dist/bpmn-modeler.development.js"></script>

2.npm安装bpmn-js

npm install bpmn-js
npm install bpmn-js-properties-panel //节点信息编辑面板

---

使用

1.HTML中使用

var bpmnModeler = new BpmnJS({
   
        container: '#canvas',
        keyboard: {
   
          bindTo: window
        }
      });

2.vue页面引入并使用bpmn

import BpmnModdle from 'bpmn-js'; //默认入口是Viewer.js文件，只有预览流程图的功能；

import BpmnModdle from 'bpmn-js/lib/Modeler'; //如果手动引入bpmn-js/lib/Modeler，则具备左侧工具栏，可以编辑流程图

<template>
	<div style="">
		<div id="js-canvas"></div>
		<div id="js-properties-panel"></div>
		<div>
			<a-button @click="download">保存到本地</a-button>
			<button @click="createNew">新建</button>
		</div>
		<!-- <a-modal></a-modal> -->
	</div>
</template>
<script>
import BpmnModdle from 'bpmn-js/lib/Modeler';
import diagramXml from '../../../assets/diagram.bpmn'; //xml文件
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

export default {
   
	name: 'bpmn',
	data() {
   
		return {
   
			viewer: null,
			canvas: null,
			bpmnText: '',
		}
	},
	mounted() {
   
		this.$nextTick().then(() => {
   

			this.canvas = document.getElementById('js-canvas')

			this.viewer = new BpmnModdle({
   
				container: this.canvas,
				keyboard