一、前言：

   由于flowable本身带的Moder风格实在与前端页面风格不一样，同时由于Modeler采用Angular.js写的，改造起来相对有一定的难度，所以打算换成bpmn.js当成流程设计器。

二、与vue的整合

1.安装以下包进开发环境

npm install --save    bpmn-js;
npm install -- save bpmn-js-properties-panel;
npm install --save camunda-bpmn-moddle;

2.定制开发以下功能：
（1）打开：打开本地的*.bpmn20.xml模型文件,并在bpmn.js插件的画布上显示出来。
（2）创建：创建一个新的流程，在画布上供用户拖拉完成。
（3）导出流程模板：导成一个xml或者zip的形式。
（4）撤销：支持向前或向后撤销，即撤销在画布上刚才操作。
(5) 放大/缩小：支持画布的放大与缩小，以及重置恢常正常大小。
(6) 保存流程的模型到自己的定义数据库表，同时同步更新到act_de_model表中。
(7) 节点属性面板的定制功能开发。

三、整合的真实效果如下：