什么是 markmap 思维导图？
markmap 是把 Markdown 转成 SVG 思维导图的开源库，核心思想是：写大纲即出图。 你不需要学新语法，平时怎么写 README 就怎么用——# 标题 当根、##### 嵌套层级、- 列举子项，每存一下图就跟着变。
本页是一个 markmap 在线工具：左边写 Markdown，右边实时出图，内置 7 个模板一键起步， 改动自动保存，支持导出 SVG / PNG 与生成分享链接，全程在浏览器本地完成，打开即用。
语法速览
| 输入 | 输出 |
|---|---|
# 一级标题 | 根节点 |
## 二级标题 | 第二层分支 |
- 列表项 | 当前层级下的叶子 / 子节点 |
**加粗** *斜体* `code` | 节点内富文本格式 |
[文字](url) | 节点内可点击的链接 |
> 引用 | 节点内引用样式 |
提示：列表里的子列表用缩进 2 空格表示一级。比如：
- 项 A - 项 A.1 - 项 A.2 - 项 B项 A.1 / A.2 会成为 A 的子节点。
内置模板：点一下就能起步
输入框上方有一排模板按钮，共 7 个，分别对应几类最常见的大纲场景： 基础示例是默认载入的工具站分类大纲，第一次打开看到的就是它； 读书笔记以《原则》为样例，演示标题分章、列表写要点、嵌套拆细节的三层结构； 技术架构按接入层、应用层、数据层、可观测四层拆解一套系统； 产品规划是一份带目标、核心功能与月度排期的 V2.0 规划； 学习路线按基础三件套、进阶、框架生态、工程化分阶段排前端路径； 会议纪要包含议题、讨论、决议、行动项四块； OKR 拆解示范在每个目标下挂多个可量化的关键结果。
点任意模板按钮，左侧大纲立刻替换为模板内容，右侧同步出图，不必从空白页琢磨语法。 模板只是起步脚手架：在模板内容上直接增删改，它就成了你自己的大纲， 对应按钮的高亮也会在第一次输入后取消，表示当前已是自定义内容。
自动保存与断点续写
输入停止 250 毫秒后页面自动渲染，并把当前 Markdown 写入浏览器 localStorage。中途刷新、误关标签页乃至重启电脑后重新打开，稿子都还在—— "刷新不丢稿"是默认行为，页面上没有保存按钮，也不需要按。
打开页面时按三级优先级恢复内容：先看 URL hash 里的 #code= 分享内容，有就解码载入； 没有，再看 localStorage 里的存稿；两者都没有，才载入默认的"基础示例"模板。 因此点"链接"按钮生成的分享链接，任何人打开都会还原成你当时的大纲，无需账号。
编辑与交互
左侧 textarea 输入 Markdown，右侧 250ms 防抖 实时渲染。出图后可以：
- 拖拽 空白处平移整张图
- 滚轮 / 触控板 缩放
- 点击节点圆点 折叠或展开整支
- 按 "自适应" 把图重新缩放至画板大小
导出与分享
| 方式 | 适用场景 |
|---|---|
| 下载 SVG | 矢量无损，README / 印刷 / 二次编辑 |
| 下载 PNG（2×） | PPT / 公众号 / 微信群，可选透明底 |
| 复制 MD | 直接粘到 Notion、飞书、Markdown 编辑器 |
| 分享链接 | base64 编进 URL hash，无需账号 |
导出 SVG 包含内嵌样式，独立打开（双击 svg 文件）也能看到正常配色和文字， 可以直接发给同事或贴到不支持 markmap 的平台。
隐私与离线
所有解析、渲染、导出在你浏览器本地完成，不连接任何 CDN，不上传任何内容。 你可以断网打开本页继续画图。
使用场景
- 读书 / 课程笔记用 Markdown 标题分章节、列表写要点，自动出一张可缩放折叠的思维导图，比手画快十倍。
- 产品 / 技术规划用大纲思考功能拆解和模块边界，需要给同事看时直接出图，免去画板拖框线。
- 文章 / 讲稿大纲写之前先把整篇文章的骨架用层级列表整理清楚，逻辑一目了然。
- 知识整理 / 学习路线把一个领域（前端、AI、投资...）的知识图谱用层级列表整理，定期回看复盘。
常见问题
markmap 怎么用？最简写法是什么？
用 Markdown 的标题和列表。# 是根节点（一级标题）， ## ### 是子层级；同级要并列项用 - 列表项。 比如 # 主题 下面接 ## 分支A ## 分支B， 每个分支下再接 - 要点1 - 要点2，就生成一张三层的思维导图。 点上方"模板"任一按钮看示例对照学习。
和 Mermaid 的 mindmap 语法比，区别是什么？
Mermaid 的 mindmap 用 缩进 表示层级，必须严格对齐，写起来比较挑剔； markmap 用 Markdown 原生标题 + 列表，你写 README 的方式就能直接出图，门槛低很多。 功能上 markmap 更专一（只画思维导图，但渲染更精致、自动折叠/缩放、支持加粗/链接等富文本）， mermaid 的 mindmap 是它多种图表之一，不如 markmap 专。
支持加粗、链接、代码、表情吗？
基本都支持。加粗 / 斜体 / code / 链接 / emoji / 表格 / 列表勾选 都能正常渲染在节点里。 纯文字内容完全无影响。
怎么折叠 / 展开节点？
点击节点右侧的圆点就能折叠或展开整支。默认展开所有层级； 图大时可手动折叠到合适粒度再导出。导出的 SVG / PNG 会保留当前的折叠状态，所以可以先折好再下载。
模板内容可以自己修改吗？
可以。模板载入后就是一段普通的 Markdown，在输入框里直接增删改即可， 改完即变成你的自定义大纲，和从零手写没有区别。 7 个模板分别对应读书笔记、技术架构、产品规划、学习路线、会议纪要、OKR 拆解等场景， 适合当起步脚手架，改成自己的内容就能直接用。
断网还能用吗？内容会上传吗？
断网可以继续画图。解析、渲染、导出全部在你的浏览器本地完成，不连接任何 CDN， 也不上传任何内容，断开网络后打开本页依然能编辑和导出。 需要联网的只有一步：把分享链接发送给对方，对方打开后的解码与渲染同样是本地完成。
导出的 SVG / PNG 能用于商业用途吗？
可以。markmap 是 MIT 协议开源软件，你输入的 Markdown 和生成的图都归你所有， 自由用于商业、印刷、二次发布。本工具仅作渲染，不上传任何内容，不主张图形版权。
"分享链接"安全吗？同事不需要账号？
安全且无需账号。分享链接把 Markdown 源 base64 编码后放在 URL 的 #code=... 部分（hash 片段），按 HTTP 规范浏览器 不会把 hash 发给服务器。任何人拿到链接在自己浏览器里本地解码渲染。 代码长（超过几十 KB）时 URL 会很长，建议直接发 .md 源文件给对方更可靠。
PNG 导出文字模糊 / 中文乱码怎么办？
本工具 PNG 是 2× 高清，正常情况下中文清晰。如果出现乱码，多半是 预览时用的字体没被嵌入 SVG。遇到问题时 改用 SVG 格式，它在 Chrome / Firefox / Safari 打开都能保真。