Sublime Text 本身不支持 Mermaid 渲染,因其预览机制缺乏前端运行环境,无法执行 JavaScript;所谓插件方案均存在兼容性问题,真正可行的是用 markmap 约定格式配合 CLI 工具生成 HTML 查看。

Sublime Text 本身不支持 Mermaid 渲染,也无官方维护的 Mermaid 插件;所谓“Sublime 安装 Mermaid 图表插件”是常见误解,实际无法直接在 Sublime 中预览 Mermaid 流程图或脑图。
为什么 Sublime 不能像 VS Code 那样用 Mermaid
Mermaid 渲染依赖完整的前端运行环境(如 WebView、JavaScript 引擎、CSS 布局器),而 Sublime Text 的预览机制仅基于纯文本解析与简单 HTML 片段渲染,不加载外部 JS 库。即使你通过 Package Control 安装了名为 Mermaid Preview 或 MarkdownPreview 的插件,它们默认也不包含 Mermaid 支持,除非你手动配置 markdown_preview 的 enabled_extensions 并引入本地 mermaid.min.js —— 但该方式在 Sublime 中长期存在兼容性问题:JS 执行被沙箱限制、graph LR 等语法无法识别、图表区域空白或报错 mermaid is not defined。
- Sublime 的 MarkdownPreview 插件底层用的是 Python-Markdown 解析器,不原生支持 Mermaid 扩展
- 所有声称“一键启用 Mermaid”的 Sublime 插件,实际都未解决 JS 加载与上下文隔离问题
- 即便强行注入 script 标签,Sublime 的预览窗口也不执行内联 JS,Mermaid.init() 永远不会触发
Sublime 中真正可行的 Markdown 脑图替代方案
如果你坚持用 Sublime 编辑 Markdown,并希望生成脑图,唯一稳定路径是绕过 Mermaid,改用 markmap 的文本约定 + 外部工具链:
- 在 Sublime 中按标准 Markdown 写结构:
# 根节点→## 一级分支→- 子项,注意用空行分隔不同层级块 - 保存为
outline.md,然后终端执行:npx markmap-cli outline.md --no-open(会生成outline.html) - 用系统默认浏览器打开该 HTML 文件,即可看到交互式脑图 —— 这才是
markmap的正确用法 - 若想快捷预览,可为 Sublime 配置自定义构建系统(Build System),绑定上述
npx命令,按Ctrl+B自动生成并刷新浏览器
别踩坑:那些看似能用实则失效的操作
网上流传的几种“Sublime Mermaid 方案”,实测在 2026 年最新版(Sublime Text 4, build 4185)中均已失效:
- 修改
MarkdownPreview.sublime-settings添加"mermaid": true—— 该字段根本不存在于官方 schema,会被忽略 - 把
mermaid.min.js放进Packages/User/并在 CSS 中引用 —— Sublime 不允许从 file:// 协议加载本地 JS - 用
MarkdownEditing插件配合自定义 CSS 高亮 Mermaid 代码块 —— 仅实现语法着色,不渲染图形 - 安装已归档的
sublimetext-mermaid(GitHub stars 23,最后更新于 2019 年)—— 依赖废弃的 PyPI 包python-mkdocs-mermaid,Python 3.10+ 下编译失败
真正需要 Mermaid 实时预览,就换到 VS Code;如果必须留在 Sublime,就接受“编辑 → 保存 → 终端生成 → 浏览器查看”这个三步流程。复杂点在于:脑图不是靠插件“启用”,而是靠格式约定 + 外部 CLI 工具驱动 —— 这个分工边界,很多人一开始就没理清。


















