中文指南

在 VS Code 中预览 Mermaid 图

VS Code 本身没有 Mermaid 预览。安装免费的 Mermaid Viewer，打开 .mmd 或 .mermaid 文件，点击编辑器右上角的预览图标，图会随着输入实时更新。在 Markdown 文件上，预览会列出每个 mermaid 代码块。扩展内置 Mermaid 12.3.0，所以预览和 PNG、SVG 导出都免费，离线可用，也不需要登录。Zovo Pro（一次性 19 美元）增加 PDF 导出、导出工作区中的全部图和保存时自动导出，每个工具可以免费试用 3 次。

免费，MIT 许可证。扩展 ID zovo.mermaid-viewer，版本 0.3.3。

其他语言版本 English · Deutsch · Español · Français · Italiano · 日本語 · Polski · Português (Brasil)

在 VS Code 中的步骤

1. 从 Marketplace 安装 Mermaid Viewer，或者按 Ctrl+P（macOS 上按 Cmd+P）后运行 ext install zovo.mermaid-viewer。
2. 打开 .mmd 或 .mermaid 文件，点击编辑器标题栏中的预览图标，或者按 Ctrl+K V（macOS 上按 Cmd+K V）。也可以从 Command Palette 运行 “Mermaid Viewer: Open Diagram Editor (Text + Live Preview)”。
3. 对于含有 ```mermaid 代码块的 Markdown 文件，点击同一个预览图标。预览会列出每张图，每张图都有自己的错误提示行和导出按钮。
4. 在 Markdown 文件中点击代码块上方的 “Edit diagram”，可以在实时预览旁编辑这张图。保存后，文本会写回原来的代码块。
5. 滚动鼠标滚轮以指针为中心缩放，拖动平移。工具栏里有 Fit 和 100%。
6. 点击 Export，可以选择 Save PNG（1x、2x 或 4x，或者指定宽度或高度）、Save SVG、Copy PNG 或 Copy SVG code。

哪些免费，Zovo Pro 增加什么

实时预览、图编辑器、Markdown 代码块的 Edit diagram、补全、错误下划线、15 个模板、Mermaid Diagrams 大纲，以及 PNG 和 SVG 的导出与复制都免费。不需要账号，不需要登录，没有 AI。

Export All Diagrams in Workspace 把文件夹里所有 .mmd、.mermaid 和 Markdown 文件中的每张图导出为 SVG、PNG 或两者，放进 mermaid-export/，目录结构和源文件一致。画不出来的图会在最后列出。文档改动后，不用再一张一张打开导出。

使用 Export All Diagrams in Workspace（Zovo Pro）

7. 在 VS Code 中打开文件夹。从 Command Palette 运行 “Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)”，或者点击预览工具栏下方 “Pro tools” 栏里的 “Export All Diagrams in Workspace”。
8. 选择 SVG、PNG 或 SVG and PNG。
9. 保留默认文件夹 mermaid-export（设置项 mermaidViewer.exportFolder），或者选 “Choose a folder…”。只有文件写出后才算一次试用，按 Escape 不消耗次数。

Export All Diagrams in Workspace 在你的电脑上可以免费用 3 次，之后才需要许可证。没有弹窗，也没有倒计时。

Zovo Pro 一次性付费 19 美元，不是订阅。许可证会启用所有 Zovo 扩展里的 Pro 工具，不只是 Mermaid Viewer。用银行卡（Stripe）付款后，许可证密钥会显示在下一个页面上。在 VS Code 的 Command Palette 里运行 “Zovo Pro: Enter Zovo Pro license key”，粘贴密钥即可。密钥在你的电脑上本地校验，不联网。通过 GitHub Sponsors 付款时，选择 "$19 one time" 档位，然后运行 “Zovo Pro: I already paid: unlock with GitHub Sponsors”。

5 人团队一次性付费 59 美元（用银行卡付款）。 全部规则和 Pro 工具见 Zovo Pro 页面（英文）。

在 Cursor、Windsurf 或 VSCodium 中的步骤

1. 按 Ctrl+Shift+X（macOS 上按 Cmd+Shift+X）打开 Extensions 视图。
2. 搜索 zovo.mermaid-viewer，点击 Install。Cursor、Windsurf 和 VSCodium 从 Open VSX 安装扩展，这个扩展在那里的名称是 zovo/mermaid-viewer。
3. 如果编辑器没有扩展商店，就在 Open VSX 页面下载 .vsix 文件，然后运行 “Extensions: Install from VSIX...”。
4. 之后的用法和 VS Code 里一样。

Mermaid Viewer 能做什么

• 流程图、时序图、类图、状态图、ER 图、甘特图、饼图、gitGraph、思维导图、时间线、桑基图、XY 图、block、C4、architecture，以及 Mermaid 12.3.0 支持的其他类型。
• 错误会在对应行加下划线，并列在 Problems 面板中。屏幕上保留最后一张正确的图，Markdown 文件里一个代码块出错不会影响其他图。
• 以指针为中心，在 1% 到 3,200% 之间缩放，支持触控板平移和双指缩放。
• SVG 导出可以使用纯文本标签，适用于 Azure DevOps 和 GitHub wiki。
• 背景可以是编辑器颜色、白色、透明或自定义颜色，导出时也使用这个背景。

它做不到的事

• 它不会在 VS Code 自带的 Markdown 预览里显示图，而是打开自己的预览面板。
• 标签里的数学公式（$$...$$）可能显示不正确，因为没有打包 KaTeX 字体。
• Mermaid 从网上加载的图标包不会加载，内置图标可以正常使用。
• 超过 500,000 个字符或 2,000 条连线的图默认不绘制，需要调高限制（设置项 mermaidViewer.maxTextSize 和 mermaidViewer.maxEdges）。
• 绘制时间超过 10 秒会被停止（设置项 mermaidViewer.renderTimeoutSeconds）。

常见问题

更多信息

英文版指南里有更多细节和其他方案。每个功能和设置都写在 Mermaid Viewer 的页面上（英文）。

内容已于 2026 年 11 月 12 日对照 Marketplace 当前版本核实。