Sublime Text 默认不渲染 Mermaid 图表，因其 Markdown Preview 插件不内置 Mermaid 解析器、不注入 mermaid.min.js 且不初始化脚本；需借助 mermaid-cli（如 mmdc 命令）导出 PNG/SVG/HTML，或改用 VS Code/Typora/Obsidian 等原生支持工具。
Sublime Text 本身不支持 Mermaid 渲染，Markdown Preview 插件默认只处理纯 Markdown、HTML 和数学公式，对 mermaid 代码块完全忽略——你看到的只会是原始文本或一片空白。
为什么 Sublime 默认不渲染 mermaid 图表
Markdown Preview 的核心是将 Markdown 转为 HTML 后交给浏览器渲染，但它不内置 Mermaid JS 解析器，也不自动注入 mermaid.min.js 或初始化脚本。即使你写了正确的 ```mermaid 代码块，导出的 HTML 里也缺少执行环境。
- 它不加载 Mermaid 官方 JS 库（v10+ 要求显式
mermaid.initialize()） - 不识别
graph TD/sequenceDiagram等语法关键字 - 导出的 HTML 中，
```mermaid块被当作普通<pre class="brush:php;toolbar:false;"><code></code> 处理，无后续解析</pre>
导出 PNG 或 HTML 图表的可行路径
必须绕过 Sublime 原生流程，借助外部工具链完成「写 → 渲染 → 导出」闭环。推荐以下组合，实测在 2026 年 4 月仍有效：
- 用 Sublime 编辑
.md文件，保留标准 Mermaid 语法（如graph TD、sequenceDiagram） - 安装 mermaid-cli（Node.js 工具，命令为
mmdc） - 终端执行：
mmdc -i input.md -o output.png -t neutral（支持.png、.svg、.pdf） - 若需 HTML 页面内嵌图表，改用：
mmdc -i input.md -o output.html -t default，它会生成含完整 JS 初始化的 HTML
注意：mmdc 只解析文件中独立的 ```mermaid 块，不处理混排在段落里的代码；且不支持 Mermaid v11 的部分新语法（如 flowchart LR 替代 graph LR），建议坚持用 graph TD 等旧式声明。
Sublime 内实时预览 mermaid 的替代方案
如果你真需要编辑时看到图表效果，不要强求 Sublime 自身实现——而是换用支持 Mermaid 的编辑器前端，例如：
- VS Code +
Markdown Preview Enhanced：开箱即用，支持主题切换和右键导出 PNG - Typora（桌面版）：直接渲染 Mermaid，导出 PDF/HTML 时图表保真度高
- Obsidian + Mermaid 插件：适合知识库场景，图表随笔记同步更新
硬在 Sublime 里折腾预览，最终大概率要手动配置自定义构建系统 + 浏览器自动刷新，稳定性差、调试成本高，远不如换工具来得直接。
Mermaid 图表导出真正的瓶颈不在「写法」，而在「执行环境」——Sublime 是编辑器，不是渲染引擎。别把时间花在补全缺失的 JS 加载逻辑上，优先确保你的 mmdc 版本 ≥ 10.9.0，并验证输入文件里每个 ```mermaid 块前后都有空行，这是最容易被忽略却导致解析失败的格式细节。
