如何深入掌握Vue库绘制Flowable流程图的技巧与细节？

本文共计2109个文字，预计阅读时间需要9分钟。

目录 + 引用 + workflow-bpmn-modeler + 注册 + bpmnModeler + 组件 + muheflow-bpmn-modeler + 引用 + 之前，博主撰写了一篇文章，向小伴侣们介绍了前端库 + bpmn.js。利用这个库，我们可以将自己绘制的流程图功能嵌入到应用中。

目录

• 引言
• workflow-bpmn-modeler
• 注册 bpmnModeler 组件
• muheflow-bpmn-modeler

引言

之前松哥发了一篇文章和小伙伴们介绍了前端的 bpmn.js 这个库，利用这个库我们可以自己将绘制流程图的功能嵌入到我们的项目中。

然而，这个库默认是给 Camunda 设计的，所以画出来的流程图导出来的 XML 文件无法直接使用，必须要做一些深度定制，才能将 XML 文件转为 Flowable 流程引擎可用的 XML 文件。这个深度定制太太太麻烦了。

所以我就在想前端有没有现成的库，可以直接用来绘制 Flowable 流程图的？找来找去，找到了两个，这两个的相似度还蛮高的，不过这两个都有一个问题，那就是都是基于 Vue2 开发的，在 Vue3 中用不了，算了，作为一个工具，Vue2 就 Vue2 吧，忍了。毕竟我也不是专业的前端工程师，掌握的前端技能能满足我后端的需求也就足够了，要是专业的前端工程师，我肯定把 bpmn.js+Vue3 整的明明白白了。