运维咖啡吧
·
最好用的流程编辑器bpmn-js系列之Viewer
内容提要
本文介绍了如何在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端打开以获得更好效果。
延伸解读
Viewer模式与Modeler模式的区别
在使用bpmn-js时，Viewer模式与Modeler模式的功能有所不同。Viewer模式主要用于展示流程图，无法直接编辑，而Modeler模式则允许用户对流程图进行修改。用户在选择使用哪种模式时，应根据实际需求来决定，若需要动态调整流程图，则应选择Modeler模式。
节点颜色修改的注意事项
在Viewer模式下，节点颜色的修改只能通过overlay和Marker方法实现，不能使用setColor方法。这意味着用户在设计流程图时，需要提前规划好颜色的使用方式，以确保在展示时能够正确反映节点状态。
拖动功能的实现
bpmn-js的Viewer模式默认不支持流程图拖动功能，用户需要通过安装diagram-js插件并进行自定义配置来实现。这个过程虽然稍显复杂，但可以显著提升用户体验，特别是在处理复杂流程图时，拖动功能能够帮助用户更好地查看和管理节点。
延伸问答
如何在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端打开以获得更好的效果。
