插件能用但流程图不渲染,主因是文件未识别为mermaid语言模式或vs code版本低于1.77.0;需确认版本≥1.77.0、插件已启用并重启,且代码置于.mmd/.mermaid文件或markdown的`mermaid代码块中。

插件能用,但流程图不渲染?大概率是文件没被识别为 Mermaid 语言模式,或者 VS Code 版本低于 1.77.0。
确认 VS Code 版本和插件激活状态
低于 1.77.0 的 VS Code 会直接跳过插件初始化,连错误提示都不会出现——它根本没启动。
- 打开「帮助 → 关于」,核对版本号;2026 年稳定版建议用
1.89.x - 扩展面板(
Ctrl+Shift+X)搜索Mermaid Preview,确认状态是「已启用」而非「已安装未启用」 - 安装或启用后必须重启 VS Code,跳过这步,90% 的“空白预览”问题就卡在这儿
- 如果执行命令
Mermaid: Preview提示“命令不存在”,说明插件未加载成功,重装 + 重启
让流程图代码真正被识别并渲染
插件只响应三类载体:.mmd 文件、.mermaid 文件、Markdown 中的 ```mermaid 代码块。其他后缀(如 .md 或 .txt)默认不处理。
- 新建
flow.mmd,图标自动变 Mermaid 标志,语言模式自动切为mermaid - 若坚持用
.md文件,必须手动触发语言模式:Ctrl+K M→ 输入mermaid→ 回车 - 在
.md中写流程图时,务必用标准代码块:```mermaid开头,```结尾,中间不能多空行或错字符 - 补一条可靠配置到
settings.json,避免每次手动切语言:"files.associations": {"*.mmd": "mermaid", "*.mermaid": "mermaid"}
修复流程图渲染异常(错位/截断/文字糊)
流程图一复杂就挤成一团,不是语法问题,而是默认缩放和主题没调好。
- 深色主题用户设
"mermaid.vscode.dark_theme": "redux-dark",浅色主题用"mermaid.vscode.light_theme": "redux";别用default,兼容性差 - 甘特图或大型类图容易撑出视口,放开限制:
"mermaid.vscode.max_Zoom": 5 - 预览右上角没缩放控件?检查是否误启了
mermaid.preview.autoZoom,设为false即可恢复手动控制 - 多个 Mermaid 插件共存(比如同时装了
vscode-markdown-mermaid和vscode-mermaid-preview)会抢渲染权,只留一个主插件
快速验证流程图是否真能动起来
别等写完一长串再试,用最简代码立刻验证链路是否通。
- 新建
test.mmd,粘贴以下五行:
flowchart LR
A[开始] --> B{判断}
B -->|是| C[执行]
B -->|否| D[退出]
C --> D
m 试试:编辑器应弹出图表类型片段建议(flowchart / sequenceDiagram 等),选中即展开骨架最容易被忽略的是:VS Code 主题切换后,Mermaid 主题不会自动同步,得手动配两套;还有就是 .md 文件里忘了加 ```mermaid 包裹,直接写 Mermaid 语法,等于白写。











