目标：集成在线流程编辑器bpmnjs

到目前为止，项目还缺少一个制作流程文件的功能。可以通过eclipse、idea中按装相应的插件制作流程图，但是本项目的目标是可以通过项目页面绘制流程图并且部署，所以需要集成web版的流程编辑器，现在有两个选择，一个是Activiti Designer，另一个是bpmnjs。别的不说，直接看效果对比。

Activiti Designer长这样，长得有点复古，并且之前用过，发现汉化的不够好，我又不会做汉化这块，所以不喜欢。

image.png

bpmnjs长这样，所以当然选bpmn了

image.png

bpmn的获取渠道：
官网：https://bpmn.io/
github：https://github.com/bpmn-io/bpmn-js-examples
因为还需要做一些改造，才能使其适用于activiti，所以我提供一个改造好的放到了码云上：https://gitee.com/study_badcat/activiti_bpmnjs
感谢慕课网“汪汪对”老师的activiti课程，我码云上的bpmnjs代码由此而来。
使用这个代码需要有点node.js、webpack和npm基础，可以了解一下。
下面开始集成进项目中。

一、下载bpmnjs代码，将文件夹改名成bpmnjs（这个无所谓，改成自己喜欢的名就行），放到activiti模块下的static目录下，如图

image.png

里边的dist和node_modules是下一步中打包出来的，这一步不应该有。

二、在bpmnjs目录下执行npm install和npm run dev命令就会出现上一步说的dist和node_modules了。其实这里bpmn下只需要dist文件夹就可以了，完全可以将bpmnjs这个项目放到别的地方去开发，开发好后打包将dist文件夹粘过来。不过因为嫌麻烦，索性就都放这了。

三、启动项目，新政一个菜单配置，请求路径这样写/bpmnjs/dist/index.html，效果如图：

image.png

至此我们初步集成了页面流程编辑器，可以在页面上绘制流程了，后边会再做一些改造，以适应需求。
这部分代码放到了码云https://gitee.com/study_badcat/ry_mp_activiti，v2.2分支。