mermaid官网
在 Mermaid 网页（以官方 Live Editor 为主）保存图表，优先用内置导出，再配合截图、手动抓 SVG 或 CLI 工具，下面是可直接执行的完整步骤与场景方案。
一、官方 Live Editor 快速导出（推荐）
- 打开 Mermaid Live Editor，粘贴/编写代码并完成渲染。
- 右上角找到Export（或 Download），按需选择：
- SVG：矢量格式，无损缩放，适合印刷/二次编辑。
- PNG：位图，适合快速分享/嵌入文档。
- PDF：部分版本支持，适合归档。
- 点击后浏览器自动下载文件；若需高清，可先在 Settings 调整渲染分辨率（如 2×）再导出。
- 额外保存：History 面板点Save可存代码到浏览器本地存储，或用 Gist 导入/导出长期备份。
二、网页通用保存法（非官方网页/无导出按钮时）
1. 手动抓取 SVG（矢量无损）
按 F12 打开浏览器开发者工具，切换到 Elements 面板。
点击图片，直接定位到<svg>
copy element或者copy outerHTML
复制粘贴到TXT文档，然后要注意，把<p>和</p>，还有<br>和</br>标签成对删除，防止出现以下界面
因为防止复制的代码标签不是成对的，所以最好把标签直接删除（直接用替换），然后把txt后缀名改成svg后缀名，（mermaid.txt -> mermaid.svg）,然后再用浏览器打开就行了。
2. 精准截图（快速获取位图）
- 用浏览器内置截图：Chrome 右键 → 截图 → 选“捕获区域”框选图表，保存为 PNG。
- 或用 Lightshot 等扩展，支持标注与高清保存，适合快速分享。
三、本地批量/自动化导出（mermaid-cli）
适合批量处理或需脚本化工作流：
- 安装 Node.js（含 npm）后，全局安装 CLI：
npminstall-g @mermaid-js/mermaid-cli - 执行命令导出：
mmdc -i 你的代码文件.mmd -o 输出文件.png# 导出PNGmmdc -i 你的代码文件.mmd -o 输出文件.svg# 导出SVG - 可选参数：
-w 1200 -h 800定尺寸、-b transparent设透明背景。
四、编辑器/IDE 内导出（VS Code/Typora）
VS Code
- 安装插件（如 Mermaid Preview）。
- 打开 .md/.mmd 文件，预览图表后，Ctrl+Shift+P 执行Export Mermaid Diagram，选 PNG/SVG 保存。
Typora
- 偏好设置 → Markdown → 勾选 Mermaid 启用。
- 右键预览中的图表 → Save as Image，保存为 PNG。
五、格式选择与场景建议
| 格式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| SVG | 无损缩放、可编辑、体积小 | 部分旧软件兼容性差 | 论文/报告、二次编辑 |
| PNG | 兼容性强、快速分享 | 放大易模糊 | 文档嵌入、网页展示 |
| 跨平台、可加密 | 编辑性差 | 归档/正式交付 | |
| CLI | 批量/自动化、可脚本化 | 需安装工具 | 多图表批量处理 |
如果文章被吞图 了，可以下载pdf文档
