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