bpmn.js 是一个BPMN2.0渲染工具包和web建模器，使得画流程图的功能在前端完成
它使用JavaScript 编写，在不需要后台服务器支持下 的前提下向现代浏览器内嵌入BPMN2.0流程图
|工具包|bpmn.io
Flowable 和 Camunda 是什么？
都是 工作流引擎
都是 基于 activiti 衍生出来的 版本,包括很多其他引擎（类如BPMN）
预览xml-viewer ex:
<!--BPMN diagram container -->
<div id='canvas'></div>
<!-- replace CDN url with local bpmn-js path -->
<script src="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"></script>
<script>
// the diagram you are going to display
const bpmnXMl ;
const viewwe = new BpmnJs({container:'#canvas'});
try{
await viewer.importXML(bpmnXML)
viewer.get('canvas').zoom('fit-viewport')
}catch(err){
}
</script>
viewer.importXML APi to display a pre-loaded BPMN 2.0 diagram. importing 过程是异步的，通过 回调通知 结果，完成后，通过 viewer.get获取 图表服务
Modeler 建模器
1、isntall bpmn-js
npm install bpmn-js
2、 import && new
import Modeler from 'bpmn-js/lib/modeler';
const modeler = new Modeler({container:'#canvas'});
try {
await modeler.importXML(bpmnXML)
}catch(err)
3、 添加 styleSheets
4、 需要 打包 例如 webpack
Hook into Life-Cycle Event
modeler.on('commandStack.changed', () => {
// user modeled something or
// performed an undo/redo operation
});
modeler.on('element.changed', (event) => {
const element = event.element;
// the element was changed by the user
});
使用 on 在事件队列中注册事件，销毁事件，需要使用 off
扩展建模器 additionalModules``Viewer
import OriginModule from 'diagram-js-origin';
// create a modeler
const modeler = new Modeler({
container: '#canvas',
additionalModules: [ OriginModule, require('./custom-rules'),
require('./custom-context-pad') ] });
再添加亿点点就出来了
