扫码阅读
手机扫码阅读

没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食!

63 2024-11-27

我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。

查看原文:没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食!
文章来源:
江南一点雨
扫码关注公众号

文章摘要

松哥正在录制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的实战案例,旨在帮助开发者创建自己的流程绘制工具。

想要了解更多内容?

查看原文:没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食!
文章来源:
江南一点雨
扫码关注公众号