摘要：本文说明如何在 Visual Studio Code 的内置 Markdown 预览中渲染 Mermaid 图表，包含安装、配置、示例与常见问题排查，适合直接发布到个人博客。

---

前提

• 已安装 Visual Studio Code。

• 希望在 .md 文件内使用 mermaid 代码块并在预览中看到可视化图表。

为什么需要扩展

VS Code 默认的 Markdown 预览为安全考虑不会执行脚本，因此需要安装扩展来在预览中渲染 Mermaid（扩展会将 Mermaid 渲染集成到预览中）。

快速安装（两种方式）

1. 扩展面板安装：打开扩展（Ctrl+Shift+X），搜索 Markdown Preview Mermaid Support，点击安装。

2. 命令面板安装：按 Ctrl+P (Quick Open)，输入：

ext install bierner.markdown-mermaid

该扩展由 Matt Bierner 维护，能够把 ```mermaid ... ``` 代码块渲染为图形（目前支持的 Mermaid 版本会随扩展更新）。

建议的项目配置（可选）

如果想在团队中统一使用，可以将扩展添加到项目 .vscode/extensions.json：

{
  "recommendations": [
    "bierner.markdown-mermaid"
  ]
}

这样打开仓库时，VS Code 会提示安装推荐扩展。

简单示例（直接复制到你的 Markdown 文件）

graph TD
  A[开始] --> B{判断}
  B -->|是| C[执行操作1]
  B -->|否| D[执行操作2]
  C --> E[结束]
  D --> E

预览方法：在 Markdown 文件中按 Ctrl+Shift+V 或右上角点击“Open Preview”，即可看到渲染结果。

需要注意的设置（安全性）

VS Code 的 Markdown 预览有安全策略，默认会禁止脚本执行（Strict 模式）。如果扩展提示被阻止或图表不显示：

• 点击预览右上角的安全提示框，选择 Markdown: Change preview security settings，根据需要临时放宽（例如允许脚本或允许不安全内容）。

• 注意安全风险：放宽后，打开不受信任的 Markdown 文件可能会执行远程脚本或加载不安全资源，请仅对受信任的工作区使用该设置。

常见问题与排查。

• 没有渲染，仍然只看到代码块：确认代码块首行是 ```mermaid（语言标识要写对）；安装后重载窗口（Developer: Reload Window）。

• 渲染样式或语法错误：检查 Mermaid 语法是否正确，尝试简化示例排查错误来源。

• 扩展不生效：尝试禁用其他 Markdown 扩展以排查冲突；检查扩展是否为最新版。

小结

通过安装 Markdown Preview Mermaid Support 并根据需要调整预览安全设置，可以在 VS Code 的 Markdown 预览中方便地编写并查看 Mermaid 图表。把扩展加入项目推荐可以让团队协作更顺畅。