3.模型设计器web modeler

需求

      当需要将BPMN流程图的创建与编译在线处理时，可以通过BPMN-JS中的modoler实现。

步骤

  1.bpmn-js相关引入

import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-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'
import BpmnModeler from "bpmn-js/lib/Modeler";

  2.属性面板

   BPMN流程图元素属性面板，需要先安装bpmn-js-properties-panel，再引入相关样式与模块

   使用npm install bpmn-js-properties-panel安装依赖包，再引入以下内容。

import "bpmn-js-properties-panel/dist/assets/properties-panel.css"
import "bpmn-js-properties-panel/dist/assets/element-templates.css"
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderMod