⭐ 觉得好用?收藏备用,下次直接打开
模板:
Markdown 大纲
思维导图
💡 拖拽平移 · 滚轮 / 触控板缩放 · 点击节点折叠/展开

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 拉取,纯思维导图(标题 + 列表 + 加粗 / 链接)完全不受影响。你可以断网打开本页继续画图。

何时不用本工具

  • 想画自由布局 / 任意位置拖框线的图 → 用 [[whiteboard]](手绘白板)
  • 想画严格的流程图 / 时序图 / ER 图 → 用 [[mermaid]]
  • 想做可编辑分发的 mindmap 文件(.xmind / .mm 格式) → 用 XMind / FreeMind 客户端
  • 想要多人实时协作的 mindmap → 用 ProcessOn / 幕布

📍使用场景

  • 读书 / 课程笔记用 Markdown 标题分章节、列表写要点,自动出一张可缩放折叠的思维导图,比手画快十倍。
  • 产品 / 技术规划用大纲思考功能拆解和模块边界,需要给同事看时直接出图,免去画板拖框线。
  • 文章 / 讲稿大纲写之前先把整篇文章的骨架用
  • 知识整理 / 学习路线把一个领域(前端、AI、投资...)的知识图谱用层级列表整理,定期回看复盘。

常见问题

markmap 怎么用?最简写法是什么?

用 Markdown 的标题和列表# 是根节点(一级标题),## ### 是子层级;同级要并列项用 - 列表项。比如 # 主题 下面接 ## 分支A ## 分支B,每个分支下再接 - 要点1 - 要点2,就生成一张三层的思维导图。点上方"模板"任一按钮看示例对照学习。

和 [[mermaid]] 的 mindmap 语法比,区别是什么?

Mermaid 的 mindmap缩进 表示层级,必须严格对齐,写起来比较挑剔;markmap 用 Markdown 原生标题 + 列表,你写 README 的方式就能直接出图,门槛低很多。功能上 markmap 更专一(只画思维导图,但渲染更精致、自动折叠/缩放、支持 KaTeX 和加粗/链接等富文本),mermaid 的 mindmap 是它 14 种图表之一,不如 markmap 专。

支持 加粗、链接、代码、表情、数学公式吗?

基本都支持。加粗 / *斜体* / code / 链接 / emoji / 表格 / 列表勾选 都能正常渲染在节点里。数学公式用 KaTeX $ ... $,但要注意:本工具为离线版,不连接 CDN,所以数学符号在导出 SVG / PNG 时字体可能丢失(页面预览看不出问题)。代码块同理(高亮库不联网)——纯文字内容则完全无影响。

怎么折叠 / 展开节点?

点击节点右侧的圆点就能折叠或展开整支。默认展开所有层级;图大时可手动折叠到合适粒度再导出。导出的 SVG / PNG 会保留当前的折叠状态,所以可以先折好再下载。

导出的 SVG / PNG 能用于商业用途吗?

可以。markmap 是 MIT 协议开源软件,你输入的 Markdown 和生成的图都归你所有,自由用于商业、印刷、二次发布。本工具仅作渲染,不上传任何内容,不主张图形版权。

"分享链接"安全吗?同事不需要账号?

安全且无需账号。分享链接把 Markdown 源 base64 编码后放在 URL 的 #code=... 部分(hash 片段),按 HTTP 规范浏览器不会把 hash 发给服务器。任何人拿到链接在自己浏览器里本地解码渲染。代码长(超过几十 KB)时 URL 会很长,建议直接发 .md 源文件给对方更可靠。

PNG 导出文字模糊 / 中文乱码怎么办?

本工具 PNG 是 2× 高清,正常情况下中文清晰。如果出现乱码,多半是预览时用的字体没被嵌入 SVG ——本工具序列化时已尽量内联颜色和字体回退到系统字体(-apple-system / system-ui),但极少数浏览器对 foreignObject 转 canvas 支持不完整。遇到问题时改用 SVG 格式,它在 Chrome / Firefox / Safari 打开都能保真。