安装Mermaid插件后，VSCode可实时预览Markdown中的流程图。使用`mermaid代码块，配置主题与语法，调试常见问题，实现文档与图表一体化编写。
VSCode 中集成 Mermaid 流程图能极大提升文档可视化能力，尤其在撰写技术笔记、设计文档或 API 说明时非常实用。通过插件支持，你可以在 Markdown 文件中直接编写 Mermaid 代码，并实时预览流程图、序列图、甘特图等。下面介绍如何在 VSCode 中高效使用和定制 Mermaid 图表。
安装与启用 Mermaid 支持
VSCode 默认不完全支持 Mermaid 渲染，需借助扩展实现完整功能：
- 安装 Mermaid Preview 插件：在扩展市场搜索 “Mermaid Preview” 或 “Markdown Preview Mermaid Support”，推荐使用官方认可的 “mermaid-markdown-syntax-highlighting” 和 “mermaid-preview” 组合。
- 启用实时预览：编写 Markdown 时，使用 Ctrl+Shift+V 打开预览窗口，Mermaid 代码块会自动渲染为图表。
-
语法格式正确：确保代码块标记为 mermaid：
```mermaid graph TD A[开始] --> B{条件} B -->|是| C[执行操作] B -->|否| D[结束] ```
常用流程图语法与结构
掌握基础语法可快速构建清晰流程图：
- 图类型声明：graph 表示流程图，TD（从上到下）、LR（从左到右）定义方向。
- 节点定义：用 A[矩形]、C(圆角) 区分节点形状。
- 连接线标注：使用 |文本| 添加分支说明。
- 子图分组：用 subgraph 标题 将相关节点归组，增强可读性。
主题与样式定制
Mermaid 支持主题配置，可在项目级统一视觉风格：
- 内置主题：默认有 dark、forest 等，通过 classDef 或初始化配置设置。
-
自定义 CSS 类：在图表中定义样式类并应用：
classDef success fill:#C8E6C9,stroke:#388E3C; class C success
-
全局配置：在 .mermaidrc 或 frontmatter 中设置：
%%{init: {'theme': 'dark', 'flowchart': {'curve': 'basis'}}}%%
调试与常见问题处理
图表不显示或渲染错误时，可按以下方式排查：
- 检查语法拼写：节点连接遗漏箭头、括号不匹配、中文标点等问题常导致解析失败。
- 查看预览日志：部分插件提供错误提示面板，点击预览区域可查看具体报错信息。
- 避免特殊字符：如需使用引号或反斜杠，应进行转义或改用英文符号。
- 更新插件版本：旧版可能不支持最新 Mermaid 语法（如 v10+ 的新特性）。
基本上就这些。只要配置得当，VSCode + Mermaid 能成为你写文档时的强大助手，无需切换工具即可完成图表设计与内容撰写。
