企业官网建设流程全解析

如何写出结构清晰的markmap思维导图：标题、列表与嵌套的6个实用技巧

【免费下载链接】markmapBuild mindmaps with plain text项目地址: https://gitcode.com/gh_mirrors/ma/markmap

markmap 是一个用纯文本写思维导图的开源工具——它会把Markdown直接可视化成可缩放、可折叠的交互式 mindmap。你只需掌握 6 个关于标题层级、列表与嵌套的实用技巧，就能让 markmap 思维导图结构清晰、层次分明，完全不需要拖拽画布。

markmap 的核心逻辑很简单：解析器只认两类"结构块"——标题（h1~h6）和列表（ul/ol/li），其余普通段落会被当作父节点的补充内容。源码中这组选择器定义在 packages/markmap-html-parser/src/index.ts，这也是后面所有技巧的根基。

技巧 1：用标题划分主干，一次只出现一个 H1

H1 是整张图的"根节点"，H2 是主干分支，H3 是细分主题。层级越深，节点越"小"，所以建议全文只用一个 H1，正文从 H2 开始：

# 我的项目 ## 背景 ## 目标 ## 计划

如果你从 H1 直接跳到 H3，解析器会先把 H2 的位置"跳过"，结构容易乱——相关逻辑见 packages/markmap-html-parser/src/index.ts 中的标题栈处理。原则：层级可以跳着省略子节点，但不要跳着写父级。

技巧 2：标题之间不要夹普通段落

markmap 中，紧跟在标题后面的普通段落会成为该标题节点的内容（相当于给分支加描述），而不是独立分支：

## 目标 把思维导图做得更清晰 ### 短期目标

这里"把思维导图做得更清晰"会挂在"目标"节点下，"短期目标"才是它的子节点。想表达并列关系就用同级标题或列表，不要用段落当分支，否则主干会变得又长又乱。

技巧 3：用列表做分支，缩进即嵌套

列表是最灵活的分支方式。缩进一层就嵌套一层，无序（-）和有序（1.）列表都支持，且可以在列表项内部继续嵌套列表：

## 计划 - 第一阶段 - 调研 - 设计 - 第二阶段 - 开发 - 测试

li内的嵌套列表会被识别为子节点，规则见 packages/markmap-html-parser/src/index.ts。技巧：同一段落里的列表保持统一缩进，混合使用不同缩进宽度（2 空格 vs 4 空格）是最常见的"图歪了"原因。

技巧 4：有序列表会自动带上序号

如果你的列表是1. 2. 3.这种有序列表，markmap 会把序号渲染进节点文字里，方便你直接引用"第 3 步"。这个行为在 packages/markmap-html-parser/src/index.ts 中实现（还会读取start属性支持从任意数字开始）。

💡 写 SOP、步骤类导图时优先用有序列表；写并列要点时用无序列表，更干净。

技巧 5：标题 + 列表自由混搭，先分块再列点

最佳实践是标题负责"大结构"，列表负责"细节"。先搭好 2~3 层标题骨架，再在叶子标题下展开列表，导图会像一棵清晰的树：

# 学习笔记 ## 第一章 ### 核心概念 - 节点 - 边 ## 第二章 - 要点一 - 要点二

层级建议控制在3~4 层以内：超过 5 层后横向空间爆炸，可读性急剧下降。渲染侧的节点宽度、间距等参数（maxWidth、spacingHorizontal）定义在 packages/markmap-view/src/types.ts，层次越少，画面留白越舒服。

技巧 6：用好"隐藏武器"：frontmatter 标题与折叠注释

两个不显眼但非常好用的功能：

• frontmatter 作为根节点文字：文件开头用---包裹的 YAML 中，title会自动成为整张图的根标题（见 packages/markmap-lib/src/plugins/frontmatter/index.ts）。配合markmap配置块，还能在文件内部直接设置initialExpandLevel（初始展开层级）、maxWidth等，做到一份文件自带一张调好参数的图。
• 折叠注释：在任意位置插入 HTML 注释<!-- markmap: foldAll -->（全部折叠）或<!-- markmap: fold -->（折叠该分支），对应实现在 packages/markmap-html-parser/src/index.ts。
• 复选框变状态图标：标题或列表项开头写- [x]/- [ ]，会渲染成打勾/未打勾图标，是任务清单类导图的神器，见 packages/markmap-lib/src/plugins/checkbox/index.ts。

速查清单 ✅

最后提一句项目结构：转换 Markdown 的核心库是 packages/markmap-lib/，浏览器渲染由 packages/markmap-view/ 负责，命令行生成 HTML 用 packages/markmap-cli/。掌握了以上 6 个技巧，你写的任何 Markdown 文档，都能一键变成一张结构清晰的 markmap 思维导图。

【免费下载链接】markmapBuild mindmaps with plain text项目地址: https://gitcode.com/gh_mirrors/ma/markmap