BpmnModeler的基本使用

使用npm安装bpmn.js

npm install --save bpmn-js

vue使用bpmn

在main.js中引入样式

import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

vue页面引入并使用bpmn

<template>
  <div class="bpmn">
    <div id="container" style="height:800px"></div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
export default {
  name: 'Bpmn',
  data () {
    return {
      bpmnModeler: null
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      const container = document.getElementById('container')
      this.bpmnModeler = new BpmnModeler({
        container: container
      })
      this.bpmnModeler.createDiagram(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport')
      })
    }
  }
}
</script>

运行结果

保存bpmn为xml

 handleSave () {
     this.bpmnModeler.saveXML({ format: true }).then(res => {
        localStorage.setItem('bpmnModelerXML', JSON.stringify(res))
      })
   }