bpmn-js 中如何完整导出 PNG（含自定义 Overlay）

在使用 bpmn-js 做流程可视化时，我们经常会遇到这样的需求：将当前流程图导出为 PNG 图片。
但当流程图包含自定义元素（如 Overlay、标记层、注释等）时，很多常规导出方案会“漏掉”这些元素。
这篇文章就带你一步步分析问题、比较方案，并给出一个能 完整导出自定义元素的最终实现方案。

背景：bpmn-js 的导出限制

bpmn-js 是一款非常强大的 BPMN 2.0 可视化建模库。它内部通过 SVG 渲染引擎（diagram-js） 来绘制流程节点与连线。

因此，最自然的导出思路是：

获取 bpmn-js 渲染的 SVG，再转成 PNG。

然而，实际应用中你会发现导出的图片可能“缺胳膊少腿”——特别是那些通过 Overlays 或自定义 DOM 元素添加的扩展标记完全不见了。

问题原因：Overlay 不在 SVG 内

bpmn-js 的 Overlay 层本质上是一个独立的 DOM 容器，它是动态挂载在流程图容器内的，比如：

而 modeler.saveSVG() 这种导出方法，只会导出 <svg> 节点的内容。因此，djs-overlay-container 中的内容根本不会出现在导出的内容里。

所以，直接通过modeler.saveSVG()