安装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：

  <font face="code">```mermaid graph td     A[开始] --> B{条件}     B -->|是| C[执行操作]     B -->|否| D[结束] ```</font>

常用流程图语法与结构

掌握基础语法可快速构建清晰流程图：

清程爱画

AI图像与视频生成平台，拥有超丰富的工作流社区和多种图像生成模式。

44

查看详情

• 图类型声明：graph 表示流程图，TD（从上到下）、LR（从左到右）定义方向。
• 节点定义：用 A[矩形]、C(圆角) 区分节点形状。
• 连接线标注：使用 |文本| 添加分支说明。
• 子图分组：用 subgraph 标题 将相关节点归组，增强可读性。

主题与样式定制

Mermaid 支持主题配置，可在项目级统一视觉风格：

• 内置主题：默认有 dark、forest 等，通过 classDef 或初始化配置设置。
• 自定义 css 类：在图表中定义样式类并应用：

  <font face="code">classDef success fill:#C8E6C9,stroke:#388E3C; class C success</font>
• 全局配置：在 .mermaidrc 或 frontmatter 中设置：

  <font face="code">%%{init: {'theme': 'dark', 'flowchart': {'curve': 'basis'}}}%%</font>

调试与常见问题处理

图表不显示或渲染错误时，可按以下方式排查：

• 检查语法拼写：节点连接遗漏箭头、括号不匹配、中文标点等问题常导致解析失败。
• 查看预览日志：部分插件提供错误提示面板，点击预览区域可查看具体报错信息。
• 避免特殊字符：如需使用引号或反斜杠，应进行转义或改用英文符号。
• 更新插件版本：旧版可能不支持最新 Mermaid 语法（如 v10+ 的新特性）。

基本上就这些。只要配置得当，VSCode + Mermaid 能成为你写文档时的强大助手，无需切换工具即可完成图表设计与内容撰写。