BPMNJS 在原生HTML中的引入与使用

BPMNJS 在HTML中的引入与使用

在网上看到的大多是基于vue使用BPMN的示例或者教程，竟然没有在HTML使用的示例，有也是很简单的介绍核心库的引入和使用，并没有涉及到扩展库。于是简单看了下，真的是一波三折，坎坎坷坷。不过结局还算是好的，最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到，但是目前的功能应该已经基本符合需求了。

示例展示

BPMNJS 在HTML中的引入与使用

在网上看到的大多是基于vue使用BPMN的示例或者教程，竟然没有在HTML使用的示例，有也是很简单的介绍核心库的引入和使用，并没有涉及到扩展库。于是简单看了下，真的是一波三折，坎坎坷坷。不过结局还算是好的，最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到，但是目前的功能应该已经基本符合需求了。

示例展示

引入步骤

引入BPMNJS(针对某些扩展，需要改造源码)

• 下载：git clone https://github.com/bpmn-io/bpmn-js.git -b v13.2.0
• 安装依赖：npm i
• 打包：npm run distro
• 生成dist文件后，移动到自己的HTML文件夹中，引入js和css

注意：三个模块的引入顺序

引入bpmn-js-properties-panel

• 下载：git clone https://github.com/bpmn-io/bpmn-js-properties-panel.git
• 安装依赖：npm i
• 打包：npm run distro
• 生成dist文件后，移动到自己的HTML文件夹中，引入js和css

注意: css文件使用在线的：https://unpkg.com/bpmn-js-properties-panel@2.1.0/dist/assets/properties-panel.css

引入tiny-svg(后续扩展render会用到)

• 下载：git clone https://github.com/bpmn-io/tiny-svg.git
• 安装依赖：npm i
• 打包：npm run distro
• 生成dist文件后，移动到自己的HTML文件夹中，引入js和css

源码改造

BPMNJS

Modeler.js改造

引用

import DiagramBaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import * as DiagramRenderUtil from 'diagram-js/lib/util/RenderUtil';
1
2

扩展

Modeler.DiagramBaseRenderer = DiagramBaseRenderer;
Modeler.DiagramRenderUtil = DiagramRenderUtil;
1
2

参考地址

官网: https://bpmn.io/toolkit/bpmn-js

Bpmn.js自定义文件说明: https://blog.csdn.net/weixin_43359503/article/details/113915776

bpmn-js-properties-panel CDN地址：https://www.jsdelivr.com/package/npm/bpmn-js-properties-panel