bpmn.js

一、bpmn.js的两种用法：

1.作为BPMN 2.0流程图的一个查看器。
实现方式为：将后缀名为.bpmn的文件（XML文档，其实这个xxx.bpmn就是已经是一个流程图文件了）加载并渲染到网页中。它会将XML文档解析成JS的对象树，通过对象树之间的关系来进行建模，并在建模的过程中检查这棵对象树是否符合BPMN 2.0规范，如果不符合的话就会报错。符合的话，就会通过该树创建对应的形状和链接。

1.准备bpmn流程图

2.定义一个变量，并读取bpmn图

3.使用bpmnViewer将bpmn图加载进来

4.qr-code的状态图显示

2.作为BPMN 2.0的建模工具包
通过上述方法，将newDiagram.bpmn文件加载到浏览器中，即可创建一个如下所示的bpmn建模工具包

bpmn建模工具箱

通过这个建模工具包，用户可以画自己想要的流程图，并把画好的图保存成bpmn格式的流程模型文档，由于newDiagram是一个封装好的工具包，直接供用户使用，所以用户在代码里并不知道各节点之间是如何建立关系的。

二、bpmn.js+后台传回的关系数据——>画状态机

我参照了一下之前后台管理系统画状态机的办法，是通过echart的graph图来画的

echart的关系图

这种关系图所需要的数据不过就是：1.节点，2.source，3.target，然后根据source和target将节点之间连接起来。

但是这种模式显然不适用于bpmn.js，bpmn.js官方文档给的两种使用方案就是读取 .bpmn文件和提供建模工具包。所以如果要利用bpmn和后台的关系数据进行状态机的建模的话，有两种方案：1.后台返回的是各个状态的关系树的XML文档；2.阅读bpmn.js源码，将他提供的newDiagram工具包进行拆分成元模型，然后再通过后台的关系数据将元模型组成一幅流程图。