fix(mermaid): remove zoom cap and export full diagrams

[advance-hub]

🤔 This is a ...

• 🐞 Bug fix
• ✅ Test Case

🔗 Related Issues

Fixes #1875

💡 Background and Solution

Large Mermaid diagrams had two related problems: zooming stopped at 3×, and PNG export measured the transformed DOM rectangle, so the downloaded result changed with the current zoom/drag state and could be clipped or low-resolution.

• Remove the 3× upper bound from wheel and button zoom while preserving the 0.5× minimum.
• Clone the rendered SVG for export and strip interactive transform/transition styles.
• Size the PNG from the SVG viewBox or intrinsic dimensions; only fall back to an unscaled DOM rectangle when neither is available.
• Add regression coverage for zooming beyond 3× and exporting a transformed SVG at its full intrinsic size.

🎥 Before / After

Before — zoom is capped at 3.0× and export dimensions change with the current zoom state.

before.mp4

After — zoom reaches 3.6× and the complete export keeps the same intrinsic dimensions.

after.mp4

Observed in Chromium with the same 15-node diagram:

• Before: zoom stopped at 3.0×; export changed from 1028×25 to 3084×75.
• After: zoom reached 3.6×; export remained a complete 2845×70 PNG before and after zooming.

📝 Change Log

Language	Changelog
🇺🇸 English	Mermaid diagrams can zoom beyond 3× and download as complete, zoom-independent PNGs.
🇨🇳 Chinese	Mermaid 流程图支持超过 3 倍缩放，并可下载不受当前缩放状态影响的完整 PNG。

✅ Verification

• Mermaid Jest suite: 70/70 passed
• TypeScript: tsc --noEmit -p packages/x/tsconfig.json
• Biome: changed files passed
• Real Chromium: zoom, export dimensions, and downloaded PNG contents verified

Summary by CodeRabbit

• 新功能
  • Mermaid 图表支持持续放大，滚轮和放大按钮不再受原有缩放上限限制。
  • 下载 PNG 时将根据图表原始尺寸生成图片，并适配设备像素比，提升清晰度。
• 问题修复
  • 修复图表放大或平移后下载 PNG 可能出现尺寸异常、变换偏移的问题。

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: debbca1f-7702-4c35-ac2d-8a61193e8f34

📥 Commits

Reviewing files that changed from the base of the PR and between 25aad7b and d55222f.

📒 Files selected for processing (2)

• packages/x/components/mermaid/Mermaid.tsx
• packages/x/components/mermaid/__tests__/index.test.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 5 remain after this review.

---

📝 Walkthrough

Walkthrough

Mermaid 组件取消缩放上限，并改用未缩放的 SVG 副本生成下载图像。测试覆盖实际 SVG 渲染、连续放大、原始尺寸和设备像素比。

Changes

Mermaid 交互行为

Layer / File(s)	Summary
缩放行为与渲染测试 packages/x/components/mermaid/Mermaid.tsx, packages/x/components/mermaid/__tests__/index.test.tsx	滚轮和放大按钮不再限制最大缩放值。测试等待实际 SVG 渲染，并验证缩放值可超过 3。
SVG 下载尺寸与副本 packages/x/components/mermaid/Mermaid.tsx, packages/x/components/mermaid/__tests__/index.test.tsx	下载逻辑克隆 SVG 并清除交互样式。导出尺寸优先使用 viewBox 或 SVG 固有尺寸。测试验证设备像素比为 2 时的画布尺寸。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to d5522

This localized change removes the Mermaid zoom cap and makes PNG exports independent of the current view state; the reported tests and checks pass, so no actionable merge-blocking risk remains beyond normal review.

Poem

小兔滚轮转呀转
放大按钮越过三
SVG 克隆去变换
画布尺寸依原宽
高清图像稳稳传

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确概括了主要变更：移除 Mermaid 缩放上限，并导出完整图表。
Linked Issues check	✅ Passed	变更满足问题 #1875 的两个核心目标：移除 3 倍缩放上限，并通过克隆 SVG 和恢复原始尺寸导出完整、未裁切的 PNG。相关回归测试也已更新。
Out of Scope Changes check	✅ Passed	代码和测试变更均围绕问题 #1875 的缩放和完整导出功能展开。未发现明显的无关变更。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nrps9909]

Reviewed exact head d55222f against base 25aad7b.

Both behavioral changes are scoped correctly. Zoom keeps the existing 0.5 minimum while removing only the requested upper cap. Downloading clones the SVG, removes the four interaction-only inline styles, prefers intrinsic viewBox or SVG dimensions, and sizes both the serialized clone and DPR canvas independently of the current pan/zoom transform.

Validation performed:

• Restored the old 3x cap locally: the new zoom regression failed with scale exactly 3 rather than greater than 3.
• Restored the old download implementation locally: the new export regression failed because it serialized the transformed live node rather than an untransformed clone.
• Exact head complete Mermaid suite: 70/70 passed.
• A temporary no-viewBox fallback probe zoomed through the public controls to about 3x, supplied transformed 1920x1440 bounds, and verified that the fallback divided them back to about 640x480 while still serializing a clean clone.
• packages/x TypeScript noEmit passed.
• Biome passed both changed files; git diff --check passed.
• Live PR head still matches the tested SHA; current remote checks are green.

AI assistance disclosure: Codex was used to inspect the exact diff, run independent red/green and fallback probes, execute static checks, and draft this review. I verified the reported commands and outcomes.