spring boot + bpmnjs + flowable工作流前后不分离画流程图

项目中要用到工作流，工作流引擎有很多，activity之前用过（仅仅用过）本来想在项目中集成activity，查了资料发现activity现在不维护了，之前开发activity的团队都离职跳到了flowable。很显然，flowable是activity的升级版，并且现在还在更新维护。从flowable官网（https://flowable.com/open-source/）可以直接下载。文档地址（https://flowable.com/open-source/docs/bpmn/ch02-GettingStarted/）从下载的zip包解压后会发现里面有wars目录（flowable-rest.war，flowable-ui.war）看到war大家都懂，扔到tomcat下直接运行打开浏览器访问对应的端口就可以自行创建流程等等。就这么简单？当然不可能！我们要在我们自己的项目中使用前端的画流程图肯定不能用flowable自带的来画，flowable提供了详细的后端流程文档，这里就不多说文档上都有也很详细。

解压flowable的文件:

要想使用flowable自带的ui来画流程图也不是不行，另创建一个服务实现跨域访问也能实现。最开始我是这么做的，后来不用了，太麻烦。那怎么办？主角bpmnjs（https://bpmn.io/toolkit/bpmn-js/）登场。下载bpmn源码，bpmn是一款轻量级的前端画流程图工具，使用非常方便（真的是这样就好了）。bpmnjs官网提供了前后分离版本，支持Vue，React。这就有点那个啥了，前后不分离版本没有。那是不是要说凉凉，我们前后不分离怎么办。

解压bpmnjs的文件:(执行安装打包命令的情况下没有node_modules,dist两个文件夹)

莫慌莫慌，困难总比办法多。不对，困难总比困难多。想办法解决，首先我们要有前后分离的环境，先下载node.js。不了解node的朋友可能要费劲了（现在得学起来了，要跟随时代的步伐）从官网下载node.js（https://nodejs.org/zh-cn/）。安装完成没问题了，接下来就开始怼bpmn了。（建议先安装cnpm,这样下载快）命令：$ npm install cnpm -g 或者淘宝镜像命令：$ npm install cnpm -g --registry=https://registry.npm.taobao.org  

安装好cnpm后，就开始真正的对bpmnjs动手了。解压我们从bpmn官网下载的zip包，进入bpmn-js-develop文件夹下，在文件夹中打开cmd，执行命令：cnpm install  之后执行：cnpm run all 这时候会发现文件夹下多出来了个dist目录，拷贝dist目录下所有文件到自己的项目中即可。之后按照bpmnjs官网例子代码直接就能使用。