在 VS Code 中使用 Mermaid 可以通过安装插件实现语法高亮、实时预览和图表导出等功能，操作步骤简单直观。以下是详细的使用方法：

一、安装支持 Mermaid 的插件

VS Code 本身不自带 Mermaid 渲染功能，需安装专用插件。推荐两款主流插件，根据需求选择其一即可：

1. Markdown Preview Mermaid Support（推荐）

• 功能：在 Markdown 预览中直接渲染 Mermaid 图表，支持几乎所有 Mermaid 语法，且与 VS Code 原生 Markdown 预览无缝集成。
• 安装步骤：
  1. 打开 VS Code，点击左侧菜单栏的「扩展」图标（或按下 Ctrl+Shift+X/Cmd+Shift+X）。
  2. 在搜索框输入 Markdown Preview Mermaid Support，找到对应插件（作者：Matt Bierner）。
  3. 点击「安装」按钮，安装完成后无需重启，立即生效。

2. Mermaid Editor

• 功能：提供独立的 Mermaid 编辑界面，支持实时预览、语法检查和图表导出（PNG/SVG 格式），适合纯 Mermaid 图表创作。
• 安装步骤：同上，搜索 Mermaid Editor（作者：Tomoyuki Kan）并安装。

二、在 Markdown 中编写并预览 Mermaid 图表

以「Markdown Preview Mermaid Support」插件为例，这是最常用的场景（在 Markdown 文档中嵌入 Mermaid 图表）：

1. 新建 / 打开 Markdown 文件

• 新建文件：点击 VS Code 左上角「文件」→「新建文件」，保存为 .md 格式（如 mermaid_demo.md）。

2. 编写 Mermaid 语法

在 Markdown 文件中，用 ```mermaid 和 ``` 包裹 Mermaid 图表语法，例如绘制一个简单的流程图：

markdown

# 我的 Mermaid 图表示例

下面是一个流程图：
```mermaid
flowchart LR
    A[开始] --> B[学习 Mermaid]
    B --> C{掌握了吗？}
    C -->|是| D[开始使用]
    C -->|否| B
    D --> E[结束]

plaintext

#### 3. 实时预览图表
- 打开 Markdown 预览窗口：
  - 方法 1：按下 `Ctrl+Shift+V`（Windows/Linux）或 `Cmd+Shift+V`（Mac），在右侧打开预览面板。
  - 方法 2：点击 VS Code 顶部菜单栏的「查看」→「编辑器布局」→「拆分编辑器」，然后在右侧面板点击「预览」按钮。
- 效果：预览面板中会实时渲染 Mermaid 代码对应的图表，修改代码后预览会自动更新。


### 三、导出 Mermaid 图表（可选）
如果需要将图表保存为图片（PNG/SVG），可通过以下方式实现：

#### 1. 使用「Mermaid Editor」插件导出
- 在 VS Code 中打开一个 `.md` 文件，或新建一个专门的 Mermaid 文件（如 `.mmd` 格式）。
- 编写完 Mermaid 代码后，右键点击编辑器空白处，选择「Mermaid: Export Diagram」。
- 选择导出格式（PNG/SVG）和保存路径，即可生成图片文件。

#### 2. 利用在线工具辅助导出
如果插件导出功能不稳定，可将 VS Code 中的 Mermaid 代码复制到 **Mermaid 在线编辑器**（[https://mermaid.live](https://mermaid.live)），在线导出高清图片后保存到本地。


### 四、其他实用技巧
1. **语法高亮**：安装插件后，Mermaid 代码在编辑器中会自动显示语法高亮，不同元素（如节点、箭头、关键字）用不同颜色标注，便于编写时区分。
2. **自动补全**：部分插件支持 Mermaid 语法的自动补全（如输入 `flowchart` 后会提示常用结构），提高编写效率。
3. **自定义渲染样式**：通过修改 VS Code 配置或插件设置，可调整图表的主题（如深色/浅色）、字体大小等样式（具体参考插件文档）。


### 总结
在 VS Code 中使用 Mermaid 的核心是「安装插件 + 编写代码 + 预览渲染」，整个流程无需离开编辑器，适合在 Markdown 文档（如技术文档、笔记、方案）中嵌入流程图、时序图等图表。推荐优先使用「Markdown Preview Mermaid Support」插件，兼容性好且操作简单，新手可快速上手。