河北省网站建设_网站建设公司_H5网站_seo优化

mermaid官网

在 Mermaid 网页（以官方 Live Editor 为主）保存图表，优先用内置导出，再配合截图、手动抓 SVG 或 CLI 工具，下面是可直接执行的完整步骤与场景方案。

一、官方 Live Editor 快速导出（推荐）

1. 打开 Mermaid Live Editor，粘贴/编写代码并完成渲染。
2. 右上角找到Export（或 Download），按需选择：
   • SVG：矢量格式，无损缩放，适合印刷/二次编辑。
   • PNG：位图，适合快速分享/嵌入文档。
   • PDF：部分版本支持，适合归档。
3. 点击后浏览器自动下载文件；若需高清，可先在 Settings 调整渲染分辨率（如 2×）再导出。
4. 额外保存：History 面板点Save可存代码到浏览器本地存储，或用 Gist 导入/导出长期备份。

二、网页通用保存法（非官方网页/无导出按钮时）

1. 手动抓取 SVG（矢量无损）

按 F12 打开浏览器开发者工具，切换到 Elements 面板。

点击图片，直接定位到<svg>

copy element或者copy outerHTML

复制粘贴到TXT文档，然后要注意，把<p>和</p>，还有<br>和</br>标签成对删除，防止出现以下界面

因为防止复制的代码标签不是成对的，所以最好把标签直接删除（直接用替换），然后把txt后缀名改成svg后缀名，（mermaid.txt -> mermaid.svg）,然后再用浏览器打开就行了。

2. 精准截图（快速获取位图）

1. 用浏览器内置截图：Chrome 右键 → 截图 → 选“捕获区域”框选图表，保存为 PNG。
2. 或用 Lightshot 等扩展，支持标注与高清保存，适合快速分享。

三、本地批量/自动化导出（mermaid-cli）

适合批量处理或需脚本化工作流：

1. 安装 Node.js（含 npm）后，全局安装 CLI：

   npminstall-g @mermaid-js/mermaid-cli

2. 执行命令导出：

   mmdc -i 你的代码文件.mmd -o 输出文件.png# 导出PNGmmdc -i 你的代码文件.mmd -o 输出文件.svg# 导出SVG

3. 可选参数：-w 1200 -h 800定尺寸、-b transparent设透明背景。

四、编辑器/IDE 内导出（VS Code/Typora）

VS Code

1. 安装插件（如 Mermaid Preview）。
2. 打开 .md/.mmd 文件，预览图表后，Ctrl+Shift+P 执行Export Mermaid Diagram，选 PNG/SVG 保存。

Typora

1. 偏好设置 → Markdown → 勾选 Mermaid 启用。
2. 右键预览中的图表 → Save as Image，保存为 PNG。

五、格式选择与场景建议

如果文章被吞图 了，可以下载pdf文档