Skip to content

Mermaid显示和下载问题 #1875

Closed

Description

@ppjjzz

重现步骤

渲染Mermaid流程图的时候

当前行为

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

预期行为

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

上下文

No response

版本

2.5.0

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

No response

Activity

  1. dosubot commented on Apr 22, 2026

    @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.

    Leave Feedback Learn about x with Dosu Add Dosu to your team

  2. Div627 commented on Apr 27, 2026

    @Div627
    Contributor

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

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

  3. ppjjzz commented on Jul 15, 2026

    @ppjjzz
    Author

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

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

    @Div627 请问有进展吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions