VSCode中的Markdown+Mermaid：用代码画流程图-VSCode-PHP中文网

VSCode中的Markdown+Mermaid：用代码画流程图

P粉986688829

发布： 2025-12-18 18:52:02

原创

323人浏览过

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

vscode中的markdown+mermaid：用代码画流程图

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：

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

注意点：

6款图片鼠标悬停效果JS代码

6款图片鼠标悬停效果JS代码，鼠标悬停在图片上后，文字标题以6种不同的动画形式出现，兼容主流浏览器，php中文网推荐下载！使用方法： 1、head区域引用css文件，modernizr.custom.js 2、在文件中加入!-- 代码开始 --!-- 代码结束 --区域代码 3、复制images文件夹里的图片到相应的路径

查看详情

缩进不影响逻辑，但换行和空格要规范；-->、==> 区分实线/虚线，|文本| 是分支标签
方向关键词：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 主题适配夜间模式

以上就是VSCode中的Markdown+Mermaid：用代码画流程图的详细内容，更多请关注php中文网其它相关文章！