VSCode中可直接用Mermaid语法实时预览流程图，需启用渲染（通过Markdown Preview Enhanced插件或内置设置markdown.mermaid.enabled）、规范书写代码块（mermaid flowchart LR...）、排查语法错误/刷新预览/禁用冲突插件。
VSCode 里写 Markdown 时，直接用 Mermaid 语法画流程图，不用导出、不依赖在线服务，改完实时预览——关键在配置对、语法准、插件稳。
确保 Mermaid 渲染已启用
VSCode 默认不渲染 Mermaid 图形。需确认以下任一条件成立：
- 使用官方 Markdown Preview Enhanced 插件（推荐），安装后右键 Markdown 文件 → “Open Preview to the Side”，Mermaid 会自动解析
- 或启用 VSCode 内置预览（v1.86+）：打开设置 → 搜索 markdown.mermaid.enabled → 勾选启用（需重启预览窗口）
- 检查当前文件后缀是 .md，且未被其他插件禁用预览功能
Mermaid 流程图基础写法（贴着 Markdown 用）
在 Markdown 文件中用三个反引号包裹 mermaid 代码块，语言标识必须小写 mermaid：
```mermaidflowchart LR
A[开始] --> B{判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
```
注意点：
- 缩进不影响逻辑，但换行和空格要规范；-->、==> 区分实线/虚线，|文本| 是分支标签
- 方向关键词：LR（从左到右）、TD（从上到下），写在 flowchart 后面
- 节点名含空格或特殊字符，用方括号 [带空格的节点] 包裹
调试常见不显示问题
图没出来？先看这三处：
- 语法报错：VSCode 底部状态栏若显示 “Mermaid: Parse error”，说明语法有误（比如少括号、错用冒号）；把鼠标悬停在代码块上，常能看到具体提示
- 预览未刷新：修改 Mermaid 代码后，手动按 Ctrl+K V（Windows/Linux）或 Cmd+K V（Mac）重开预览，或点击预览页右上角刷新图标
- 插件冲突：禁用其他 Markdown 预览类插件（如 Markdown Preview GitHub Styling），只留一个主力插件测试
进阶小技巧提升效率
写多了可以加点“甜味剂”：
- 用 classDef 统一设置样式，例如：classDef green fill:#a8e6a1,stroke:#333;，再用 C:::green 应用到节点
- 流程图里插入链接：C["[点击跳转](https://example.com)"]，预览中可点击（需插件支持）
- 在设置中搜索 mermaid.theme，切换 default / forest / dark 主题适配夜间模式
