VSCode中的Markdown+Mermaid：用代码画流程图_网络技术

发布时间 - 2025-12-18 00:00:00 点击率：次

VSCode中可直接用Mermaid语法实时预览流程图，需启用渲染（通过Markdown Preview Enhanced插件或内置设置markdown.mermaid.enabled）、规范书写代码块（mermaid flowchart LR...）、排查语法错误/刷新预览/禁用冲突插件。

VSCode 里写 Markdown 时，直接用 Mermaid 语法画流程图，不用导出、不依赖在线服务，改完实时预览——关键在配置对、语法准、插件稳。

VSCode 默认不渲染 Mermaid 图形。需确认以下任一条件成立：

使用官方 Markdown Preview Enhanced 插件（推荐），安装后右键 Markdown 文件 → “Open Preview to the Side”，Mermaid 会自动解析
或启用 VSCode 内置预览（v1.86+）：打开设置 → 搜索 markdown.mermaid.enabled → 勾选启用（需重启预览窗口）
检查当前文件后缀是 .md，且未被其他插件禁用预览功能

在 Markdown 文件中用三个反引号包裹 mermaid 代码块，语言标识必须小写 mermaid：

```mermaid
flowchart LR
A[开始] --> B{判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
```

注意点：

图没出来？先看这三处：

语法报错：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 主题适配夜间模式