5. Save the flowchart

need

       Generally speaking, the designed BPMN flow chart needs to be downloaded and saved to a designated place, and bpmn's native xml format and image format are both possible.

Add click button 

       Add two buttons to the page tag for clicking to trigger saving. Here, for simplicity, to prevent the button from being overlapped by the bpmn svg, put the button inside the properties.

<template>
  <div class="modeler">
    <div id="canvas"></div>
    <div id="properties">
      <button id="saveBpmn" @click="saveToBpmn('test.bpmn')">保存为BPMN</button>
      <button id="savePic" @click="saveToPic('leyo.svg')">保存为图片</button>
    </div>
  </div>
</template>

Add save method

    Add two asynchronous methods saveToBpmn saveToPic in methods. The new version of bpmn-js recommends using async+await instead of the old-fashioned callback method. For details, refer to https://github.com/bpmn-io