## 前言在上一章节中我们为后端SpringCloud集成了Activiti，使其拥有了流程处理的能力，那么我们该如何在线绘制流程图呢？我们可以用Activiti自带的设计器 **activiti-modeler**，它长这个样子： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c1c3c49d45c4a9792ea20043676bc4c~tplv-k3u1fbpfcp-watermark.image) 这个activiti-modeler比较丑而且上面的东西也比较晦涩难懂，于是就想到了还有没有其他更好的开源设计器可供使用，那就是bpmn-js : ![image-20210521144621377.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbf9386e54ef4daf8344abded1090a27~tplv-k3u1fbpfcp-watermark.image) 它的设计器比上面的稍微好看了一些，但是还不够，我们可以通过修改代码DIY达到我们想要的效果： ![image-20210521145335051.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/825bdd45a46e44f383cebf970f4d7b35~tplv-k3u1fbpfcp-watermark.image) 由于这两个都是国外团队的作品，资料比较少且难啃，存在一定上手难度。在明确需求后，就开始着手使用吧！ ## 集成步骤 #### 1. 引用依赖可以使用npm安装依赖： ```javascript npm i bpmn-js --save // bpmn-js核心依赖，包括设计器的画布、样式和左侧工具栏 npm i bpmn-js-properties-panel --save // bpmn-js右侧属性栏插件 ``` 也可以在package.json中添加引用后再执行npm install安装 ```json "dependencies": { ..., "bpmn-js": "7.5.0", "bpmn-js-properties-panel": "0.37.6" } ``` #### 2. 使用依赖引用完成后，就可以引入到页面开始使用了，创建一个空页面，按照如下代码实现样例 ![image-20210521154109414.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e035061a84094b418eb652232648e179~tplv-k3u1fbpfcp-watermark.image) ```vue ``` 附件：defalutXml.js ```javascript export default ` ` ``` 完成后效果图，bpmn-js引用成功： ![image-20210521154109414.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68df69acc94b4e0fbfc0402ca5f371bd~tplv-k3u1fbpfcp-watermark.image)