流程画图工具感觉挺普通的，流程图基本都标准化了。标准化的东西其实是最容易做的，但是IDEA一直没有顺手的流程绘图工具。其实这也是一个Opportunity，哈哈，自己动手做一个IDEA插件吧~不过这个机会还是留给了看这篇文章的各位。宋哥今天给大家介绍另一个工具bpmn.js。利用这个，结合大家熟悉的Vue，我们可以开发自己的流程绘制工具，一起来看看吧。先来看看效果图：好了，废话不多说，开始吧！1.bpmn.jsbpmn.js是一个工具包。使用此工具包，我们可以轻松地在浏览器中创建、嵌入或扩展BPMN流程图。重要的是这个过程非常简单，我们只需要少量的代码就可以实现这个目标。不知道有多少看过文章的朋友在日常工作中接触过流程图。如果经常接触的话，我猜很多朋友可能都看过基于bpmn.js搭建的流程图绘制工具。因为flowable-ui过于重量级，如果我们只是想在项目中嵌入一个流程绘制工具，那么显然bpmn.js是最好的选择。网上关于bpmn.js的文章其实很多，但是在与Vue集成的时候，基本都是用Vue2，而且这个工具在Vue2和Vue3中的使用还是有很多区别的。今天松哥就以Vue3为例，和小伙伴们分享一下这个工具在Vue3中的使用。2.+Vue32.1项目创建首先，我们执行如下命令创建一个Vue3项目：npmcreatevite@latestbpmn_demo--templatevuecdbpmn_demonpminstallnpmrundev创建完成后，我们首先安装bpmn需要的依赖。js，一共有三个依赖：bpmn-js是核心的流程绘制工具。bpmn-js-properties-panel这个是bpmn-js的属性面板。流程图中的每个节点都有属性。如果需要配置这些数据，就需要使用这个依赖。小伙伴们看下图右侧部分是这个依赖实现的功能：camunda-bpmn-moddle如果你的流程引擎使用了Camunda，你可以通过camunda-bpmn-配置流程支持的任务属性模型模块。好了，废话不多说，先把这三个依赖一一安装好：npminstallbpmn-jsnpminstallbpmn-js-properties-panelnpminstallcamunda-bpmn-moddle另外，宋哥亲测，还需要安装@bpmn-io/properties-panel和inherits用于解决内部兼容问题。安装命令如下：npmi@bpmn-io/properties-panelnpmi继承另外项目中使用了一个ElementUI按钮，所以需要安装ElementUI-Plus，如下：npminstallelement-plus--save安装完成后，给你看我安装的版本，是最新版本：{"name":"bpmn_demo","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},"dependencies":{"@bpmn-io/properties-panel":"^0.19.0","bpmn-js":"^9.4.0","bpmn-js-properties-panel":"^1.5.0","camunda-bpmn-moddle":"^6.1.2","元素加":"^2.2.14","继承":"^2.0.4","vue":"^3.2.37"},"devDependencies":{"@vitejs/plugin-vue":"^3.0.3","vite":"^3.0.7"}}经宋哥亲测，如果使用Webpack代替Vite构建项目，则不需要安装inherits，根据自己的实际情况安装即可。项目创建后，如果你提示缺少这个组件安装即可，没有提示可以忽略2.2开发页面用Vite新建的项目默认是没有安装路由的，路由也很麻烦，这里就省事了。我会直接新建一个组件来写我们的页面，以后只要在App.vue中引入我的新组件即可。首先，我新建了一个名为BpmnView的组件，然后在这个组件中配置了bpmn.js，内容如下：
