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：
“`mermaid
flowchart LR
A[开始] –> B{判断}
B –>|是| C[执行操作]
B –>|否| D[结束]
“`
注意点：
6款图片鼠标悬停效果JS代码 
90
6款图片鼠标悬停效果JS代码，鼠标悬停在图片上后，文字标题以6种不同的动画形式出现，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用css文件，modernizr.custom.js 2、在文件中加入!– 代码 开始 –!– 代码 结束 –区域代码 3、复制images文件夹里的图片到相应的路径
90 
- 缩进不影响逻辑，但换行和空格要规范；–>、==> 区分实线/虚线，|文本| 是分支标签
- 方向关键词：LR（从左到右）、td（从上到下），写在 flowchart 后面
- 节点名含空格或特殊字符，用方括号 [带空格的节点] 包裹
调试常见不显示问题
图没出来？先看这三处：
- 语法报错：VSCode 底部状态栏若显示 “Mermaid: Parse Error”，说明语法有误（比如少括号、错用冒号）；把鼠标悬停在代码块上，常能看到具体提示
- 预览未刷新：修改 Mermaid 代码后，手动按 Ctrl+K V（windows/linux）或 Cmd+K V（mac）重开预览，或点击预览页右上角刷新图标
- 插件冲突：禁用其他 Markdown 预览类插件（如 Markdown Preview gitHub Styling），只留一个主力插件测试
进阶小技巧提升效率
写多了可以加点“甜味剂”：