四、初识bpmnjs-Modeler

目录

一、前言

二、使用Modeler创建流程设计器

2.1创建antd项目，并引入bpmnjs相关的引用

2.2 antd集成流程设计器

三、加载流程模版

四、导出流程模版

五、总结

一、前言

        Modeler是bpmnjs最核心的类，它集成了bpmnjs所有的核心模块，我们进行流程创建时，就是使用的它，它支持流程的创建、编辑、导入、导出等功能，以及属性扩展、交互控制、事件监听等。

        在Modeler中又有BpmnModeler模块与BpmnViewer模块，其中BpmnModeler负责整个流程所需元素的创建、交互、扩展、编辑等功能。BpmnViewer负责展示流程图，比如查看某个流程审批中走过的路径、查看某个业务流程图等，它不具备创建、编辑等操作。

        本章节，我们介绍一下Modeler的使用。

二、使用Modeler创建流程设计器

        我们使用antd作为前端开发语言，首先使用antd创建一个项目，并引入bpmnjs相关引用。

2.1创建antd项目，并引入bpmnjs相关的引用

        如何创建antd项目，此处就不做额外讲解，主要讲一下需要引用哪些bpmnjs包。

        需要引用的包如下（以本项目的版本号为例，自己可根据情况修改包的版本号）：

"bpmn-js": "13.2.0",
    "bpmn-js-bpmnlint": "0.21.0",
    "bpmn-js-color-picker": "0.6.0",
    "bpmn-js-connectors-extension": "^0.4.6",
    "bpmn-js-external-label-modeling": "^1.0.3",
    "bpmn-js-properties-panel": "2.1.0",
    "bpmn-js-token-simulation": "^0.31.0",
    "bpmn-moddle": "^8.0.1",
    "bpmnlint": "8.3.2",
    "camunda-bpmn-moddle": "^7.0.1",
    "diagram-js": "12.2.0",
    "diagram-js-grid-bg": "^1.0.1",
    "diagram-js-minimap": "^4.1.0",
"highlight.js": "11.8.0",  //主要用于显示流程图
    "pinia": "~2.1.7",  //用于页面交互之前的数据缓存

2.2 antd集成流程设计器

        bpmnjs的流程设计器主要有两个模块，toolbar与container，即两个容器，toolbar代表顶部的操作按钮，包括自带或扩展的按钮，都放入toolbar中。container即主要的操作区容器。当然也可自定class名称与样式覆盖。所以，我们首先创建一个空的