Mermaid显示和下载问题

[ppjjzz]

重现步骤

渲染Mermaid流程图的时候

当前行为

1. 流程图内容比较多比较大时，最大的缩放倍数被锁定为3导致无法进一步放大查看
2. 点击下载时下载的图片不是包含完整Mermaid流程图的图片，而是被裁切成当前缩放后可视区域的内容

预期行为

1. 不限制最大缩放倍数
2. 下载的图片能够高清还原完整的流程图不裁切，或者导出出svg文件

上下文

No response

版本

2.5.0

您在哪些浏览器上遇到了这个问题？

No response

[dosubot]

感谢反馈！关于你提到的两个问题，以下是目前的实现情况：

1. 最大缩放倍数被锁定为 3

确认存在此限制。缩放范围 0.5 ~ 3.0 是硬编码在 Mermaid.tsx 中的三个位置 [1] [2] [3]，例如：

• 滚轮缩放：Math.max(0.5, Math.min(3, prev + delta))
• 放大按钮：Math.min(prev + 0.2, 3)
• 缩小按钮：Math.max(prev - 0.2, 0.5)

目前没有提供 props 来自定义这些上下限。如果要支持更大的缩放倍数，需要将这些值改为可配置的参数。

2. 下载图片被裁切

从代码设计上看，handleDownload 函数（第 205-232 行）是通过获取完整 SVG 元素并用 getBoundingClientRect() 取其完整尺寸来渲染到 Canvas 上导出 PNG 的 [4]。理论上应该导出完整的图而非可视区域。但这里的问题可能在于：当流程图非常大时，getBoundingClientRect() 返回的是 SVG 元素在 DOM 中的实际渲染尺寸（可能受容器裁切影响），而不是 SVG 内容的完整尺寸。这可能是导致导出被裁切的原因。

一个更可靠的方式可能是直接读取 SVG 的 viewBox 或内部尺寸属性来确定画布大小，或者直接导出 SVG 文件（正如你建议的）。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[Div627]

@ppjjzz 感谢反馈，问题已收到。

我们会评估优化 Mermaid 大图的缩放和导出逻辑，包括放开缩放上限，以及确保下载时导出完整流程图，避免只截取当前可视区域。也会考虑支持 SVG 导出。