Excalidraw标题标签（H1-H6）层级正确使用

Excalidraw 中标题层级（H1–H6）的结构化实践

在技术团队频繁使用白板进行系统设计、流程梳理和原型沟通的今天，一张“看得懂”的图往往比十页文档更高效。Excalidraw 作为一款手绘风格的开源绘图工具，凭借其简洁界面与高度自由的画布，已成为工程师、产品经理和技术写作者表达复杂逻辑的首选工具之一。但随之而来的问题是：当图表越来越复杂，信息密度越来越高时，如何避免它变成“只有作者自己能看懂”的视觉迷宫？

答案并不在于添加更多图标或连接线，而在于引入一种看似简单却极为关键的设计思维——结构化排版。其中，最核心的一环就是：合理使用标题层级。

虽然 Excalidraw 不支持 HTML 标签，也无法像 Word 或 Markdown 那样自动解析<h1>到<h6>的语义结构，但这并不意味着我们不能在视觉层面模拟出一套完整的标题体系。事实上，专业用户早已通过字体大小、粗细、对齐方式和空间布局，在画布上建立起了一套“人类可读、机器不可析”但协作高效的层级语言。

什么是有效的标题层级？

标题层级本质上是一种信息架构手段，用于表达内容之间的主次关系与隶属结构。从 H1（最高级）到 H6（最细粒度），每一层都承担着不同的语义角色：

• H1 是整张图的灵魂：它定义了这张图的主题，比如“订单履约系统架构”或“用户登录状态机”。一个画布应只有一个 H1，否则就会出现主题分散、认知混乱的问题。
• H2 是主干模块的划分者：它们将大问题拆解为几个关键组成部分，如“前端交互”、“网关层”、“数据库设计”等。这些通常是读者第一眼扫视后要定位的重点区域。
• H3 和 H4 负责深入细节：比如某个微服务下的 API 分组、状态流转中的子状态、配置项说明等。它们通常依附于某个 H2 模块之下，形成清晰的归属感。
• H5 和 H6 则属于补充性信息：字段解释、异常备注、调试提示等。这类内容不宜过多，否则容易喧宾夺主。

这套结构不需要代码支持，只需要你在输入文本时多花几秒钟思考：“这段文字在整个图中处于什么位置？它是在讲全局，还是局部？”

如何在 Excalidraw 中实现标题层级？

尽管没有原生标签系统，Excalidraw 提供了足够的视觉控制能力来模拟语义层级。以下是经过多个项目验证的有效做法：

字体与样式建议

⚠️ 小贴士：Excalidraw 的默认字体是Virgil或Cascadia，字号变化对可读性影响显著。建议在设置时开启“View > Show grid”辅助对齐，并统一相同层级的样式。

视觉结构强化技巧

光有字号还不够。真正的结构清晰来自于整体排版的一致性和空间关系的明确性。

• 用留白制造呼吸感：H1 与第一个 H2 之间保留至少两倍行距的空间；每个 H2 区块之间也应有足够的垂直间隔。这能让眼睛自然停顿，识别区块边界。
• 结合容器框增强区域隔离：为每个 H2 模块添加浅色背景矩形（甚至带圆角），并在角落标注编号或图标，能极大提升可扫描性。例如：
  plaintext ┌──────────────────────┐ │ [H2] 数据同步服务 │ ├──────────────────────┤ │ • [H3] 增量拉取机制 │ │ • [H3] 冲突解决策略 │ └──────────────────────┘
• 利用缩进与分组体现从属关系：H3 内容应相对于其父级 H2 向右缩进 20–40px；可通过 Group 功能将一组相关元素打包，避免拖动错位。
• 谨慎使用颜色编码：可以为不同类型模块赋予不同标题颜色（如红色代表安全相关，蓝色代表通信模块），但切忌过度依赖颜色区分层级——这对色盲用户极不友好，且打印成黑白 PDF 后会完全失效。

实战案例：构建一张结构清晰的技术图

假设我们要绘制一张“API 网关限流策略设计”图，该如何应用标题层级？

我们可以这样组织：

[H1] API 网关限流策略设计 ├── [H2] 客户端维度限流 │ ├── [H3] AppKey 白名单机制 │ └── [H3] QPS 统计窗口（滑动时间窗） ├── [H2] 接口维度限流 │ ├── [H3] 路径匹配规则 │ └── [H3] 动态阈值调整（基于负载） ├── [H2] 异常行为熔断 │ ├── [H3] 连续失败检测 │ └── [H3] 自动封禁策略（H4: 冷却期 5min） └── [H2] 监控与告警 ├── [H3] Prometheus 指标暴露 └── [H3] 告警规则配置（H5: alertmanager 路由规则）

在 Excalidraw 中，你会看到：

• 顶部居中放置加粗 40px 的 H1；
• 四个 H2 模块横向或纵向分布，各自包裹在浅灰底框内；
• 每个模块内的 H3 文本左对齐、字号 22px，部分关键点加粗；
• H4/H5 内容以较小字号呈现，颜色略淡，表示其为次级说明；
• 所有同层级文本严格对齐，启用网格确保整齐。

这样的图即使导出为 PNG 发送给新同事，对方也能在 10 秒内抓住重点，理解整体结构。

常见陷阱与避坑指南

即便理解了原理，实际操作中仍有不少人踩坑。以下是一些高频误区及改进建议：

❌ 多个 H1 并列存在

“这张图画了两个主题：一个是认证流程，另一个是日志收集。”

结果导致读者无法判断哪一部分更重要。解决方案：如果确实涉及多个主题，应拆分为两张独立画布，或用 H1 表达总主题（如“平台核心机制设计”），再用 H2 分别命名具体模块。

❌ 层级跳跃严重

“直接从 H1 跳到 H4，中间没有任何过渡。”

这种做法破坏了认知流畅性。读者需要自行脑补缺失的结构。建议：最多使用到 H4，H5/H6 仅用于注释；若需更深嵌套，请考虑拆分子图并用链接关联。

❌ 视觉权重倒置

“H3 字号设为 30px，H2 反而只有 24px。”

这是典型的“形式压倒功能”。字号必须反映重要性顺序。检查方法：遮住文字内容，仅凭大小和粗细判断哪个是主模块，若判断错误则需调整。

❌ 完全依赖颜色区分层级

“所有 H2 都是蓝色，H3 是绿色，H4 是灰色。”

一旦遇到色盲用户或灰度打印场景，整个结构就崩溃了。最佳实践：颜色只能作为辅助手段，核心差异仍应体现在字号、字重和空间位置上。

为什么这件事值得认真对待？

你可能会问：“不就是调个字号吗？有必要这么讲究？”

其实不然。标题层级的背后，是一种信息责任感的体现。

当你创建一张共享图示时，你不再只是为自己记录想法，而是在为他人降低理解成本。尤其是在远程协作、跨职能沟通、新人入职培训等场景下，一张结构清晰的图，可能就是别人能否快速上手的关键。

更进一步地，随着越来越多团队将 Excalidraw 图嵌入 Notion、Obsidian 或 Confluence 构建知识库，这些带有明确层级的图甚至可以成为“可视化目录”——点击 H2 模块跳转到详细文档，或反向链接回相关会议纪要，实现真正的图文联动。

这也正是 Excalidraw 超越“涂鸦工具”的地方：它不只是让你画得快，而是让你表达得清楚。

结语：好图是“结构”出来的

一张优秀的 Excalidraw 图，从来不是靠炫酷的图标或复杂的连线赢得尊重的。它的力量，来自于背后的逻辑清晰与结构严谨。

而这一切的起点，往往只是一个简单的决定：
从写下第一个 H1 开始，就想清楚这张图到底想说什么。

当你养成了设置主标题、划分模块、逐层展开的习惯，你会发现，不仅你的图变得更易读，你的思维也会变得更加结构化。而这，正是技术人最重要的底层能力之一。

所以下次打开 Excalidraw 时，不妨先停下来问一句：

“我的 H1 准备好了吗？”

如果答案是肯定的，那你就已经走在通往清晰表达的路上了。