没有一个顺手的流程绘制工具？好吧，自己动手，丰衣足食！

文章摘要

松哥正在录制TienChin项目视频，使用Spring Boot和Vue3技术栈，并介绍了流程绘制工具bpmn.js的使用。他指出虽然IDEA上缺少流程绘制工具，但这也提供了开发IDEA插件的机会。

1. bpmn.js简介

bpmn.js是一款在浏览器中创建、嵌入或扩展BPMN流程图的工具包，易于使用且代码量少。该工具适用于需要在项目中嵌入流程绘制工具的场景，尤其是对于不需要flowable-ui这类重量级工具的用户。

2. 结合Vue3使用bpmn.js

2.1 项目创建

首先创建Vue3项目，并安装bpmn.js及其属性面板和camunda-bpmn-moddle依赖。松哥提醒，可能还需要额外安装依赖以解决兼容性问题，并且如果使用ElementUI，则需要安装ElementUI-Plus。

2.2 开发页面

在App.vue中引入新建的BpmnView组件，页面分为绘图区和属性设置区，以及一个下载流程图XML文件的按钮。

2.2.1 canvas初始化

使用BpmnModeler在onMounted回调中初始化画布，设置container，并调用createDiagram开始绘图。

2.2.2 properties配置

配置属性面板时，需要在BpmnModeler中指定parent位置，并挂载相关模块。这些模块分别代表不同的属性，可以通过尝试删除模块来了解各自的功能。

2.2.3 下载按钮

下载按钮实现通过调用bpmnModeler.saveXML方法获取XML文件，并使用虚拟a标签模拟点击事件下载。getFileName方法用于提取流程图的id作为文件名。

3. 小结

bpmn.js的优势在于方便地嵌入到项目中。松哥提到，当前工具针对的是Camunda流程引擎，对于Flowable可能需要额外定制。

松哥的TienChin项目视频强调了流程绘制工具bpmn.js的实用性，并提供了一个结合Vue3的实战案例，旨在帮助开发者创建自己的流程绘制工具。