运维咖啡吧
·
最好用的流程编辑器bpmn-js系列之Viewer
💡
原文中文，约5700字，阅读约需14分钟。
📝
内容提要
本文介绍了如何在Vue环境中使用bpmn-js的Viewer模式渲染流程图，并调整节点颜色。通过缩放功能自适应画布，使用overlay和Marker方法修改颜色。同时，介绍了diagram-js插件实现流程图拖动功能，并提供在线Demo供用户体验。
🎯
关键要点
- 本文介绍了如何在Vue环境中使用bpmn-js的Viewer模式渲染流程图。
- 使用zoom功能可以自适应画布，确保渲染图位于画布中间。
- 在Viewer模式下，节点颜色的修改只能通过overlay和Marker方法实现。
- 通过CSS和addMarker方法设置节点颜色，连线的处理有特殊的CSS规则。
- 使用diagram-js插件可以实现流程图的拖动功能，需在package.json中添加依赖并自定义Viewer。
- 提供了在线Demo供用户体验，建议在PC端打开以获得更好效果。
❓
延伸问答
如何在Vue环境中使用bpmn-js的Viewer模式渲染流程图？
在Vue环境中使用bpmn-js的Viewer模式，可以通过创建一个BpmnViewer实例并调用importXML方法来渲染流程图。
如何调整bpmn-js中流程图节点的颜色？
在Viewer模式下，可以通过overlay和Marker方法来修改节点颜色，具体方法包括添加CSS和使用addMarker方法。
bpmn-js的Viewer模式支持哪些功能？
bpmn-js的Viewer模式支持流程图渲染、节点颜色修改和缩放功能，但默认不支持拖动功能，需要使用diagram-js插件来实现。
如何在bpmn-js中实现流程图的拖动功能？
可以通过在package.json中添加diagram-js依赖，并自定义Viewer来实现流程图的拖动功能。
bpmn-js的Viewer模式与Modeler模式有什么区别？
Viewer模式主要用于预览流程图，节点颜色修改只能通过overlay和Marker方法，而Modeler模式则允许使用setColor方法进行颜色修改。
在哪里可以体验bpmn-js的在线Demo？
可以访问https://bpmn.ops-coffee.com体验bpmn-js的在线Demo，建议在PC端打开以获得更好的效果。
➡️
