个人开发心得：工作流编辑器开发（流程图编辑，流程图查看，流程图下载）vue bpmn

最终效果：

1、流程图编辑器：（节点添加、节点编辑）

2、流程图弹窗查看

基础搭建：

1、在 package.json中添加需要使用到的插件：
        

"bpmn-js": "^11.1.0",

"bpmnlint": "^6.4.0",

"bpmn-js-bpmnlint": "^0.15.0",

"bpmnlint-loader": "^0.1.4",

"vkbeautify": "^0.99.3",

1）bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成
相关可查看博客分享：全网最详bpmn.js教材-基础篇_微芒丶的博客-CSDN博客

2）vkbeautify是一款格式化工具，可以将xml、json字符串格式化处理，处理后的字符串直接放入pre+code的标签即可。项目中引入可方便在编辑时查看 xml

相关可查看博客：hljs和vkbeautify的xml,json代码高亮功能_沧沧沧的博客-CSDN博客

2、一些代码：

1、流程图弹窗：（使用 bpmn的Viewer模式查看，仅查看不可编辑）
 关于bpmn的Viewer模式具体可查看：bpmn-js Edit 和Viewer（一）_diagram-js_关了个封的博客-CSDN博客

1）图片自适应屏幕：

this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
2）放大缩小工能：

this.zoom = this.bpmnViewer.get('canvas').zoom()

this.zoom += (zoomIn ? 0.1 : -0.1)

if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)

2、在线查看 xml：

<!--在线查看xml-->

<el-drawer  :modal="false" direction="rtl" :visible.sync="xmlOpen" size="60%">

<!-- 设置对话框内容高度 -->

<el-scrollbar>

<pre v-highlight="xml数据"><code class="xml"></code></pre>

</el-scrollbar>

</el-drawer>
3、流程图编辑：（使用 bpmn 的modeler模式）
相关可查看：bpmn是什么?bpmn.js的简单使用 附源码_灰太狼大王灬的博客-CSDN博客