markmap 是把 Markdown 转成 SVG 思维导图的开源库,核心思想是:写大纲即出图。你不需要学新语法,平时怎么写 README 就怎么用——# 标题 当根、## ### 嵌套层级、- 列举子项,每存一下图就跟着变。
| 输入 | 输出 |
|---|---|
# 一级标题 | 根节点 |
## 二级标题 | 第二层分支 |
- 列表项 | 当前层级下的叶子 / 子节点 |
**加粗** *斜体* `code` | 节点内富文本格式 |
[文字](url) | 节点内可点击的链接 |
> 引用 | 节点内引用样式 |
$E=mc^2$ | KaTeX 数学公式(页面预览 OK,导出注意) |
提示:列表里的子列表用缩进 2 空格表示一级。比如:
- 项 A - 项 A.1 - 项 A.2 - 项 B项 A.1 / A.2 会成为 A 的子节点。
左侧 textarea 输入 Markdown,右侧 250ms 防抖 实时渲染。出图后可以:
| 方式 | 适用场景 |
|---|---|
| 下载 SVG | 矢量无损,README / 印刷 / 二次编辑 |
| 下载 PNG(2×) | PPT / 公众号 / 微信群,可选透明底 |
| 复制 MD | 直接粘到 Notion、飞书、Markdown 编辑器 |
| 分享链接 | base64 编进 URL hash,无需账号 |
导出 SVG 包含内嵌样式,独立打开(双击 svg 文件)也能看到正常配色和文字,可以直接发给同事或贴到不支持 markmap 的平台。
所有解析、渲染、导出在你浏览器本地完成,不连接任何 CDN——KaTeX / 代码高亮等需要资源的特性已禁用了 CDN 拉取,纯思维导图(标题 + 列表 + 加粗 / 链接)完全不受影响。你可以断网打开本页继续画图。
用 Markdown 的标题和列表。# 是根节点(一级标题),## ### 是子层级;同级要并列项用 - 列表项。比如 # 主题 下面接 ## 分支A ## 分支B,每个分支下再接 - 要点1 - 要点2,就生成一张三层的思维导图。点上方"模板"任一按钮看示例对照学习。
Mermaid 的 mindmap 用 缩进 表示层级,必须严格对齐,写起来比较挑剔;markmap 用 Markdown 原生标题 + 列表,你写 README 的方式就能直接出图,门槛低很多。功能上 markmap 更专一(只画思维导图,但渲染更精致、自动折叠/缩放、支持 KaTeX 和加粗/链接等富文本),mermaid 的 mindmap 是它 14 种图表之一,不如 markmap 专。
基本都支持。加粗 / *斜体* / code / 链接 / emoji / 表格 / 列表勾选 都能正常渲染在节点里。数学公式用 KaTeX $ ... $,但要注意:本工具为离线版,不连接 CDN,所以数学符号在导出 SVG / PNG 时字体可能丢失(页面预览看不出问题)。代码块同理(高亮库不联网)——纯文字内容则完全无影响。
点击节点右侧的圆点就能折叠或展开整支。默认展开所有层级;图大时可手动折叠到合适粒度再导出。导出的 SVG / PNG 会保留当前的折叠状态,所以可以先折好再下载。
可以。markmap 是 MIT 协议开源软件,你输入的 Markdown 和生成的图都归你所有,自由用于商业、印刷、二次发布。本工具仅作渲染,不上传任何内容,不主张图形版权。
安全且无需账号。分享链接把 Markdown 源 base64 编码后放在 URL 的 #code=... 部分(hash 片段),按 HTTP 规范浏览器不会把 hash 发给服务器。任何人拿到链接在自己浏览器里本地解码渲染。代码长(超过几十 KB)时 URL 会很长,建议直接发 .md 源文件给对方更可靠。
本工具 PNG 是 2× 高清,正常情况下中文清晰。如果出现乱码,多半是预览时用的字体没被嵌入 SVG ——本工具序列化时已尽量内联颜色和字体回退到系统字体(-apple-system / system-ui),但极少数浏览器对 foreignObject 转 canvas 支持不完整。遇到问题时改用 SVG 格式,它在 Chrome / Firefox / Safari 打开都能保真。
# 一级标题 / ## 二级标题 / ### 三级标题 控制层级;同级用 - 列表项 列举子节点code、链接、表格、emoji、KaTeX 数学公式