VSCode默认Markdown预览不支持Mermaid，需安装官方扩展Markdown Preview Mermaid Support并重启；配置mermaidJSPath解决CDN加载失败；通过设置config和customCSS调整字体、主题与样式。
Mermaid 图表不显示，预览里只看到代码块
VSCode 默认的 Markdown 预览（Ctrl+Shift+V）压根不解析 Mermaid，它只当那是普通代码块。不是你写错了，是它根本没这功能。
必须装扩展：官方推荐的是 Markdown Preview Mermaid Support（作者：shd101wyy），别选错名字带“live”或“enhanced”的变种——那些要么已弃用，要么依赖额外服务，反而容易卡住。
- 安装后重启 VSCode（不重启，预览不会生效）
- 确保你的 Mermaid 代码块用的是
mermaid语言标识，不是mermaid-js或空着 - 代码块前后必须有空行，否则预览引擎可能跳过解析
语法正确但图表渲染失败，控制台报 Cannot find module 'mermaid'
这是扩展加载 Mermaid 运行时失败的典型错误，常见于 VSCode 更新后或离线环境。
根本原因：该扩展依赖 Mermaid 的浏览器版 JS 包，它默认从 unpkg CDN 加载；一旦网络不通、被拦截，或 VSCode 启用了严格内容安全策略（比如企业版/教育版），就会挂掉。
- 临时解法：开代理或换网络重试一次，看能否拉下
mermaid@10.9.0（当前稳定版） - 长期解法：手动下载
mermaid.min.js到本地，再在 VSCode 设置里填入路径：markdown-preview-mermaid.mermaidJSPath - 注意路径要用正斜杠、绝对路径，例如：
C:/Users/xxx/.vscode/mermaid.min.js
流程图中文乱码、字体太小或布局错位
Mermaid 渲染效果受 CSS 和配置双重影响，VSCode 预览窗口不继承系统字体，也不自动放大缩放。
关键控制点在 Mermaid 初始化配置，不是 Markdown 文件本身。你需要在 VSCode 设置中修改 markdown-preview-mermaid.config：
- 加
"theme": "neutral"比默认default更兼容中文字体 - 显式设
"fontFamily": "'Microsoft YaHei', sans-serif"（Windows）或"'PingFang SC', sans-serif"（macOS） - 避免用
%%{init: ...}%%写在文档开头——预览插件不一定识别这种内联配置 - 如果节点文字挤成一团，大概率是
flowchart TD换成了flowchart LR却没调宽容器，这时得靠 CSS 注入（见下一条）
想微调样式，比如改箭头颜色、加背景框，但 inline style 不生效
Mermaid 的 classDef / style 语法在 VSCode 预览里支持有限，尤其涉及 SVG 属性（如 fill、stroke）时，常被预览层的默认 CSS 覆盖。
真正可控的方式是注入自定义 CSS：在 VSCode 设置里找到 markdown-preview-mermaid.customCSS，填一个本地 .css 文件路径，里面写：
svg .edgePath path { stroke: #2563eb !important; }
svg .node rect { fill: #f9fafb !important; stroke: #d1d5db !important; }
注意：!important 很关键，不然预览自带样式优先级更高；路径必须存在且可读；改完要重新打开预览页才生效。
Mermaid 的真实渲染行为高度依赖版本和宿主环境，同一段代码在 GitHub、Obsidian、VSCode 预览里表现都可能不同——别纠结“标准效果”，先让本地能稳定跑出可用图。
