sublime text 无法直接渲染 mermaid 流程图,必须依赖外部 mermaid-cli(mmdc)工具,且需正确配置路径、使用严格合规的 `mermaid 代码块、保存为 .md 文件并确保语法无误;预览不可靠,推荐导出 html 到浏览器查看。

Sublime Text 本身不渲染 Mermaid 流程图,所谓“插件绘图”必须靠外部 CLI 工具(mmdc)驱动,且需手动配置路径、语法识别和代码块格式,缺一不可。
为什么 ```mermaid 块在 Sublime 里只是纯文本
Sublime 的预览机制不执行 JavaScript,Mermaid 渲染依赖前端运行环境(WebView + JS 引擎),而 MarkdownPreview 等插件仅做静态 HTML 转换。即使装了 Mermaid Preview 插件,若没配 mmdc 或语法识别错,它连尝试渲染的机会都没有。
- 插件报
Cannot find mmdc:说明系统没装或路径未填对,不是插件失效 - 代码块写成
```mermaid-js或```mmd:插件直接跳过,不会触发任何处理 - 文件后缀是
.txt或状态栏显示Plain Text:Mermaid 块根本不会被识别为特殊代码块
必须安装并配置 mermaid-cli(mmdc)
Mermaid Preview 插件不自带渲染器,它只调用系统命令 mmdc 生成 SVG/PNG。这步绕不开,且容易卡在权限或路径上。
- 先全局安装:
npm install -g mermaid-cli(需 Node.js ≥18) - 验证是否可用:
mmdc --version,若报 command not found,说明没进$PATH - macOS 常见路径:
/usr/local/bin/mmdc;Windows 常见路径:C:\Users\{user}\AppData\Roaming\npm\mmdc.cmd - 在 Sublime 的
Preferences → Package Settings → Mermaid Preview → Settings – User中填入完整路径,别只写mmdc
```mermaid 代码块必须严格合规
Mermaid Preview 对代码块标识极其敏感,一个字符偏差就导致静默失败——它不会报错,只会当普通代码块处理。
- 开头必须是
```mermaid(全小写,无空格,无后缀),结尾必须是```单独一行 - 文件必须保存为
.md后缀,且右下角状态栏显示Markdown或Markdown GFM(来自 MarkdownEditing) - Mermaid 10+ 语法(如
flowchart TD)在旧版插件中可能不识别,可降级试graph TD - 缩进、换行、中文标点(如全角冒号、顿号)会导致解析失败,建议用英文半角输入法编写
导出比预览更可靠,别信“实时刷新”
Mermaid Preview 的“预览”功能本质是调 mmdc 生成临时 SVG 再嵌入 HTML,但 Sublime 的 HTML 渲染沙箱常拦截内联样式或外部引用。实测中,导出为 HTML 文件后用浏览器打开,成功率远高于插件内置预览窗口。
- 右键菜单选
Mermaid Preview: Export to HTML,生成独立文件 - 用 Chrome/Firefox 打开该 HTML,确保看到完整流程图而非空白或报错
- 如果导出失败,控制台会输出具体错误(如
Parse error on line 1),比预览窗口的黑盒行为更容易定位 - 别依赖
enable_autoreload:它在 Mermaid 场景下极易引发重复渲染冲突,保存后手动导出更稳
Mermaid 图表的成败不在插件多炫酷,而在 mmdc 是否真能跑通、代码块是否零容错、文件上下文是否被 Sublime 正确识别——这三个点任何一个松动,流程图就永远停在文本阶段。











