超级会员免费看
本文介绍了如何利用BPMN-JS、bpmn-js-properties-panel和camunda相关库创建一个在线的BPMN流程图模型设计器。详细步骤包括相关库的引入、属性面板设置以及缩略图功能的实现，使得用户能够在线编辑和查看大型流程图的缩略视图。
需求
当需要将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/prop
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
