安装Mermaid插件后可在VSCode中编写并实时预览流程图，需使用`mermaid代码块并在Markdown中右键预览，导出图片需借助截图或在线工具。
VSCode 中可以通过集成 Mermaid.js 来轻松绘制流程图、序列图、甘特图等。虽然 VSCode 本身不原生支持 Mermaid 渲染，但结合插件可以实现编写与实时预览功能。以下是具体使用方法。
安装 Mermaid 支持插件
要在 VSCode 中编写并预览 Mermaid 图，需安装支持该语法的扩展：
- Markdown Preview Mermaid Support：为 Markdown 文件中的 Mermaid 代码块提供预览支持。
- Mermaid Diagrams：独立预览 .mmd 文件或代码片段。
打开 VSCode 扩展市场（Ctrl+Shift+X），搜索 “Mermaid”，选择下载量高且维护活跃的插件进行安装。
在 Markdown 中编写流程图
Mermaid 流程图通常嵌入在 Markdown 文件中。创建一个 .md 文件，使用如下语法：
```mermaid
graph TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
C --> D
```
保存文件后，右键点击编辑器选择 “Open Preview” 或使用快捷键 Ctrl+Shift+V，在预览窗口中即可看到渲染后的流程图。
启用实时预览与错误提示
部分插件支持自动刷新预览。确保设置中启用了实时更新功能。若图表未显示：
- 检查 Mermaid 代码是否以 ```mermaid 开头，而非普通 ```。
- 确认插件已正确安装并启用。
- 查看 VSCode 控制台是否有渲染错误（帮助 → 开发者工具）。
某些插件还提供语法高亮和结构校验，有助于快速定位拼写或格式问题。
导出图表为图片
目前 VSCode 预览不直接支持导出图像。可采用以下方式保存图表：
- 截图工具手动截取预览内容。
- 将代码复制到在线 Mermaid Live Editor（如 mermaid.live），导出为 PNG 或 SVG。
- 使用支持导出的 IDE 插件或脚本自动化渲染。
基本上就这些。配置一次后，就能在 VSCode 里流畅地写文档和画图了。Mermaid 简洁的语法配合插件支持，让技术文档中的图示变得更高效。不复杂但容易忽略细节，比如代码块标识写错就白写了。
