新业务下来要搞流程图，作为笔记仅供参考，记录此次渡劫历程
技术：使用vue + bpmn

简介bpmn

BPMN有以下4个基本元素：

流对象（Flow Objects）：包括事件（开始/中间/中止事件）、活动、网关，是BPMN中的核心元素；
连接对象（Connecting Objects）：包括顺序流、消息流、关联；
泳道（Swimlanes）：包括池和道两种类型；
人工信息（Artifacts）：包括数据对象、组、注释。

安装bpmn.js

实现创建编辑流程图，首先我们需要安装 bpmn.js。材料要先有，才能根据自己的需要去锻造适合自己的兵器

npm i bpmn.js --save -D

注：安装完成后可以在node-modules中找到bpmn-font，bpmn-js，bpmn-moddle文件夹

ts文件引入bpmn

从一堆工具里抽取出自己需要的装备

// 左侧工具栏及编辑节点的样式
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';
// 引入bpmn-js/lib/Modeler，可自定义节点进行编辑
import BpmnModeler from 'bpmn-js/lib/Modeler';

或者在vue单页面中引入：

import BpmnModeler from 'bpmn-js/lib/Modeler';
 
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn';
import bpmnModdleDescriptor from 'bpmn-moddle/resources/bpmn/json/bpmn.json';
 
// BPMN国际化
import customTranslate from '@/bpmnJs/customTranslate/customTranslate';
// 自定义汉化模块
var customTranslateModule = {
    translate: ['value', customTranslate]
};

接下来开始反复的锻造自己所需要的武器：
html：

<template>
  <div class="containers" ref="content">
        <a-space>
            <a-button @click="downloadBpmn">
                <a-icon type="download"/>
                保存BPMN
            </a-button>
            <a-upload
                :file-list="uploadBpmnFileList"
                :before-upload="beforeUpload"
            >
                <a-button>
                    <a-icon type="upload"/>
                    导入BPMN
                </a-button>
            </a-upload>
            <a-button-group>
                <a-button @click="handlerUndo">撤销</a-button>
                <a-button @click="handlerRedo">恢复</a-button>
            </a-button-group>
            <a-button-group>
                <a-button @click="handlerZoom(0.1)">放大</a-button>
                <a-button @click="handlerZoom(-0.1)">缩小</a-button>
                <a-button @click="handlerZoom(0)">还原</a-button>
            </a-button-group>
            <a hidden ref="downloadLink"></a>
        </a-space>
 
        <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel" class="panel"></div>
    </div>
</template>

 data() {
        return {
            bpmnModeler: null,
            container: null,
            canvas: null,
 
            uploadBpmnFileList: [],
            scale: 1,
        }
    },
    created() {
 
    },
    mounted() {
        this.init();
    },
    methods: {
 
        /**
         * 初始化流程设计器对象
         * @returns {Promise<void>}
         */
        async init() {
            // 获取到属性ref为“content”的dom节点
            this.container = this.$refs.content
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            // 创建BpmnModeler
            this.bpmnModeler = new BpmnModeler({
                container: canvas,
                // 加入工具栏支持
                propertiesPanel: {
                    parent: '#js-properties-panel'
                },
                additionalModules: [
                    // 左边工具栏以及节点
                    propertiesProviderModule,
                    // 右边的工具栏
                    propertiesPanelModule,
                    // 国际化
                    customTranslateModule
                ],
                moddleExtensions: {
                    bpmn: bpmnModdleDescriptor
                }
            });
            // 创建新流程
            await this.createNewDiagram(xmlStr);
        },
 
        /**
         * 创建新流程
         * @param bpmn BPMN流程XML报文
         * @returns {Promise<void>}
         */
        async createNewDiagram(bpmn) {
            // 将字符串转换成图显示出来;
            this.bpmnModeler.importXML(bpmn, err => {
                if (err) {
                    this.$message.error('打开模型出错,请确认该模型符合Bpmn2.0规范');
                } else {
                    console.log("成功导入模型");
                }
            });
        },
 		// 撤销操作
        handlerRedo() {
            this.bpmnModeler.get("commandStack").redo();
        },
        // 恢复操作
        handlerUndo() {
            this.bpmnModeler.get("commandStack").undo();
        },
        // 放大/缩小/还原（0.1放大；-0.1缩小；0还原）
        handlerZoom(radio) {
            const newScale = !radio ? 1.0 : this.scale + radio;
            this.bpmnModeler.get("canvas").zoom(newScale);
            this.scale = newScale;
        },
 
        beforeUpload(file) {
            // this.uploadBpmnFileList = [];
            this.openBpmn(file);
            return false;
        },
 
 
        openBpmn(file) {
            const reader = new FileReader();
            // 读取File对象中的文本信息，编码格式为UTF-8
            reader.readAsText(file, "utf-8");
            reader.onload = () => {
                // 读取完毕后将文本信息导入到Bpmn建模器
                this.createNewDiagram(reader.result);
            };
            return false;
        },
 
        downloadBpmn() {
            this.bpmnModeler.saveXML({format: true}, (err, xml) => {
                if (!err) {
                    // 获取文件名
                    const name = `${this.getFilename(xml)}.bpmn`;
                    // 将文件名以及数据交给下载方法
                    this.download({name: name, data: xml});
                }
            });
        },
        download({name = "diagram.bpmn", data}) {
            // 这里就获取到了之前设置的隐藏链接
            const downloadLink = this.$refs.downloadLink;
            // 把输就转换为URI，下载要用到的
            const encodedData = encodeURIComponent(data);
 
            if (data) {
                // 将数据给到链接
                downloadLink.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
                // 设置文件名
                downloadLink.download = name;
                // 触发点击事件开始下载
                downloadLink.click();
            }
        },
 
        getFilename(xml) {
            let start = xml.indexOf("process");
            let filename = xml.substr(start, xml.indexOf(">"));
            filename = filename.substr(filename.indexOf("id") + 4);
            filename = filename.substr(0, filename.indexOf('"'));
            return filename;
        },

over！转换SVG的方法在连接中，可根据个人需求改动
参考文章：
https://blog.csdn.net/qq_33721382/article/details/114419903.