Excalidraw 中标题层级（H1–H6）的结构化实践
在技术团队频繁使用白板进行系统设计、流程梳理和原型沟通的今天，一张“看得懂”的图往往比十页文档更高效。Excalidraw 作为一款手绘风格的开源绘图工具，凭借其简洁界面与高度自由的画布，已成为工程师、产品经理和技术写作者表达复杂逻辑的首选工具之一。但随之而来的问题是：当图表越来越复杂，信息密度越来越高时，如何避免它变成“只有作者自己能看懂”的视觉迷宫？
答案并不在于添加更多图标或连接线，而在于引入一种看似简单却极为关键的设计思维——结构化排版。其中，最核心的一环就是：合理使用标题层级。
虽然 Excalidraw 不支持 HTML 标签，也无法像 Word 或 Markdown 那样自动解析<h1>到<h6>的语义结构，但这并不意味着我们不能在视觉层面模拟出一套完整的标题体系。事实上，专业用户早已通过字体大小、粗细、对齐方式和空间布局，在画布上建立起了一套“人类可读、机器不可析”但协作高效的层级语言。
什么是有效的标题层级？
标题层级本质上是一种信息架构手段，用于表达内容之间的主次关系与隶属结构。从 H1（最高级）到 H6（最细粒度），每一层都承担着不同的语义角色：
- H1 是整张图的灵魂：它定义了这张图的主题，比如“订单履约系统架构”或“用户登录状态机”。一个画布应只有一个 H1，否则就会出现主题分散、认知混乱的问题。
- H2 是主干模块的划分者：它们将大问题拆解为几个关键组成部分，如“前端交互”、“网关层”、“数据库设计”等。这些通常是读者第一眼扫视后要定位的重点区域。
- H3 和 H4 负责深入细节：比如某个微服务下的 API 分组、状态流转中的子状态、配置项说明等。它们通常依附于某个 H2 模块之下，形成清晰的归属感。
- H5 和 H6 则属于补充性信息：字段解释、异常备注、调试提示等。这类内容不宜过多，否则容易喧宾夺主。
这套结构不需要代码支持，只需要你在输入文本时多花几秒钟思考：“这段文字在整个图中处于什么位置？它是在讲全局，还是局部？”
如何在 Excalidraw 中实现标题层级？
尽管没有原生标签系统，Excalidraw 提供了足够的视觉控制能力来模拟语义层级。以下是经过多个项目验证的有效做法：
字体与样式建议
| 层级 | 推荐字号 | 字重 | 对齐方式 | 使用场景 |
|---|---|---|---|---|
| H1 | 36–48px | 加粗 | 居中 | 画布主标题，如“支付系统设计” |
| H2 | 28–32px | 加粗 | 左对齐 | 主要模块区隔，如“风控引擎”、“交易流水” |
| H3 | 20–24px | 可加粗 | 左对齐 | 子模块名称，如“反欺诈策略”、“异步通知机制” |
| H4 | 16–18px | 正常或加粗 | 左对齐 | 功能点或组件名，如“IP 黑名单校验” |
| H5–H6 | 14–16px | 正常/斜体 | 左对齐 | 注释、参数说明、限制条件 |
⚠️ 小贴士：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 准备好了吗？”
如果答案是肯定的，那你就已经走在通往清晰表达的路上了。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
