Markmap 入门到精通：从一段 Markdown 到一张可交互思维导图

适用读者：会 Markdown 即可，无需编程基础。学完你将能在浏览器、VS Code、命令行、博客里自由玩转 Markmap。

更多教程，猫哥的博客：https://blog.csdn.net/qq8864

一、为什么是 Markmap

普通 Markdown 是线性的，思维导图是发散的。把两者结合，就是 Markmap 的核心价值：

• 写一次，两种视图 —— 左边写文本，右边自动出脑图。
• 文本即数据 —— 导图本身是 Markdown，能 git、能协作、能让 AI 生成。
• 完全免费开源 —— MIT 协议，无广告、无水印。
• 多端可用 —— 浏览器、VS Code、命令行、网页嵌入都行。

二、三种上手方式

1. 在线版（30 秒上手）

打开 https://markmap.js.org/repl，左侧输入 Markdown，右侧自动渲染。无需安装任何东西，适合临时使用。

2. VS Code 插件（最推荐）

1. 在 VS Code 扩展商店搜索 markmap（作者 gera2ld），点击安装。
2. 新建文件，命名时后缀用 .mm.md（如 study.mm.md）。
3. 打开文件，右侧自动出现预览面板。
4. 编辑左侧 Markdown，右侧实时同步。

小技巧：按 Ctrl+K V（Mac：Cmd+K V）可单独弹出预览窗口，方便拖到副屏。

3. 命令行（适合批处理）

npm install -g markmap-cli
markmap your-note.md -o output.html

把任意 .md 文件转成独立 HTML，发给同事双击就能用。

三、Markdown 语法速成

Markmap 复用了你熟悉的 Markdown 语法，无需学习新规则。

  ### 1. 标题控制层级

  # 的数量决定节点深度（最多支持 6 级）。

  # 一级标题（根节点）
  ## 二级标题（分支）
  ### 三级标题（叶子）

  ### 2. 列表扩展内容

  在标题下用列表补充子节点：

  # 学习计划
  ## 编程
  - Python
    - 基础语法
    - 数据分析
  - JavaScript
    - React
    - Vue
  ## 阅读
  - 技术书
  - 论文

  ### 3. 富文本

  节点内容支持 Markdown 富文本：

  - **加粗**、 *斜体*、 ~~删除线~~
  - [链接文本](https://...) —— 节点可点击
  - 行内代码：`code`
  - 代码块：```js\nconsole.log(1)\n```（按语言高亮）

  ### 4. 任务列表

  # 待办
  - [x] 已完成
  - [ ] 未完成

  复选框会保留显示，状态一目了然。

  ### 5. 引用块

  # 名言
  > 保持简单
  > —— Unix 哲学

四、配置项（让导图更专业）

在文件顶部用 front matter 配置：

  ---
  title: 我的导图
  markmap:
    colorFreezeLevel: 2
    maxWidth: 300
    initialExpandLevel: 2
  ---

  # 正文

  常用配置：

  - colorFreezeLevel: 2 —— 前 2 层节点固定颜色
  - initialExpandLevel: 2 —— 打开时默认展开到第 2 层
  - maxWidth: 300 —— 节点文字最大宽度（像素）
  - nodeMinHeight: 16 —— 节点最小行高
  - spacingHorizontal: 80 —— 节点横向间距
  - pan: true —— 允许拖拽
  - zoom: true —— 允许滚轮缩放

  > 在线版可在右侧面板直接调整这些参数并实时预览。

五、导出与分享

VS Code 中

预览窗口底部有 Export 按钮，支持：

• HTML —— 独立可交互页面（推荐分享）
• SVG —— 矢量图，适合嵌入文档
• PNG —— 位图，适合贴 PPT

命令行

markmap note.md -o out.html # 导出 HTML
markmap note.md -o out.svg # 导出 SVG
markmap note.md --no-assets # 生成单文件 HTML（不依赖 CDN）

六、实战案例

案例 1：读书笔记

  # 《深入理解计算机系统》读书笔记
  ## 第 1 章：计算机系统漫游
  - 信息就是位 + 上下文
  - 程序被翻译成不同格式
    - 源代码
    - 编译 → 汇编
    - 汇编 → 机器码
    - 链接
  - 处理器读解释指令
  - 高速缓存至关重要
  ## 第 2 章：信息的表示和处理
  - 二进制与十六进制
  - 整数与浮点数
  - 字节序问题

案例 2：项目周会大纲

  # 本周工作回顾
  ## 已完成
  - [x] 用户登录接口联调
  - [x] 性能压测报告
  ## 进行中
  - [ ] 推荐算法 v2 灰度
  - [ ] 数据看板 v2 设计
  ## 下周计划
  - 接口文档整理
  - 技术分享：Markmap 使用

案例 3：AI 辅助生成

直接让 LLM 输出 Markmap 语法：

Prompt：帮我把"如何准备技术面试"做成 Markmap。

  # 技术面试准备
  ## 算法与数据结构
  - 数组 / 链表
  - 二叉树 / 图
  - 动态规划
  ## 系统设计
  - 缓存
  - 消息队列
  - 分布式
  ## 行为面试
  - STAR 法则
  - 项目复盘

七、常见问题

Q：节点太多，导图挤成一团怎么办？
A：调小 maxWidth（如 200），或调大 spacingHorizontal。

Q：想让所有节点同色，不要彩色怎么办？
A：设置 colorFreezeLevel: 0，根节点色就是全局色。

Q：导图打开层级太深/太浅？
A：用 initialExpandLevel，-1 表示全部展开。

Q：能嵌入自己的网站吗？
A：用 markmap-lib + markmap-view，或直接导出独立 HTML 嵌进 iframe。

• 博客嵌入：把导图 HTML 放进 ，或用 markmap-lib 集成到 React/Vue。
• 自动化：CI 里跑 markmap-cli，把 docs/ 下的 .md 批量生成脑图。
• 二次开发：阅读 https://github.com/gera2ld/markmap 源码，D3.js + TS 实现。

九、配套资源

• 官网：https://markmap.js.org/
• 在线试玩：https://markmap.js.org/repl