工程师画图工具：Excalidraw 和技术图表达
从 Excalidraw 这款手绘风格画图工具出发，讨论技术文章里的图应该如何帮助读者理解结构、流程、边界和取舍，而不只是让页面看起来热闹。
画图一直是我的弱项。
后来慢慢发现，弱的可能不只是手，也包括脑子。画不出来的时候，常常不是工具不熟，而是自己还没想清楚。脑子里如果只有一团雾，换成什么画图工具，最后也只能画出一张雾的截图。
不过工具仍然重要。
好工具不能替人思考，但能降低表达的摩擦。尤其技术文章里，一张图如果画得清楚，读者能少走很多弯路。
我后来比较喜欢用 Excalidraw。
为什么是 Excalidraw
最早注意到 Excalidraw，是因为读 《Jest 实践指南》 时，发现里面的配图很好看。
比如这张：
它不是那种精确到像素的商务图，也不是满屏渐变和装饰的 PPT 图。线条有一点手绘感，形状很简单，重点很清楚。看起来不像工程制图，更像一个人在白板前把事情讲明白。
后来搜了一下，发现工具就是 Excalidraw。
它还有一个很对工程师胃口的地方：开源。代码在 GitHub 上，在线版本能直接用，也可以自己部署。如果在公司里对数据安全比较敏感，不想把图放到外部服务，私有化部署也有路径。
当然，如果不想维护，也可以用它的增值服务。
这些都不是最关键的。最关键的是，它的风格会逼人少装。
手绘风格不太适合堆复杂视觉效果。你很难在 Excalidraw 里画出那种精致但空洞的咨询公司图。它更适合画关系、流程、层级、边界和变化。对技术文章来说，这刚好够用。
技术图不是插画
很多技术文章里的图，问题不是不好看，而是没有承担信息任务。
有些图只是为了让页面不那么空，于是放一张看起来科技感十足的插画。读者看完以后，除了知道作者会配图，什么也没多明白。
技术图应该先回答一个问题：
这张图想替文字完成什么工作？
如果只是为了装饰，它可有可无。如果能让读者更快理解一个结构、一个流程、一个状态变化、一个权衡关系，那它就有价值。
我现在大概会把技术图分成几类：
- 流程图：说明事情按什么顺序发生。
- 架构图：说明模块之间怎么连接。
- 状态图：说明对象会在哪些状态之间变化。
- 对比图：说明两个方案差在哪里。
- 分层图：说明一个系统有哪些边界。
- 时间线：说明问题如何演进。
画图前先选类型，比打开工具后乱拖形状重要得多。
一篇文章如果讲的是“从请求到响应发生了什么”，就画流程；如果讲的是“前端、服务端、存储、队列之间的关系”，就画架构；如果讲的是“订单、任务、审核状态怎么变”，就画状态；如果讲的是“为什么不用 A 方案而用 B 方案”，就画对比。
图的类型选错，后面越画越乱。
先写一句话，再画图
我觉得比较有用的办法，是画图前先写一句话。
不是标题，而是这张图的结论。
比如：
AI 应用不是多一个网页，而是网页后面接了一条按需生产线。
或者：
前端 mock 的价值，是让页面在后端不完整时仍然能独立运转。
这句话写清楚以后，图就不容易跑偏。
所有元素都要为这句话服务。不能服务的，就删掉。技术图最怕什么都想放，最后变成一个缩小版系统全景。作者觉得完整，读者只觉得眼睛疼。
一张图里最好只有一个主角。
其他东西要么是背景，要么是支撑。读者第一眼应该知道从哪里看起，第二眼知道箭头往哪里走，第三眼能把图和正文里的论点对上。
如果三眼之后还在找入口，这图大概率已经失败了。
Excalidraw 适合的练习方法
有了工具后，可以先临摹。
我当时就照着《Jest 实践指南》里的图画了一张：
临摹不是抄袭发布，而是练手。看别人怎么分组、怎么留白、怎么用箭头、怎么控制文字长度。画几张以后就会发现，图好不好看，很多时候不在形状复杂，而在取舍。
Excalidraw 里有几个习惯很有用：
- 先用矩形和箭头搭骨架，不急着调颜色。
- 一个区域只表达一层意思，不把概念堆成一坨。
- 文字尽量短，能用名词就不用长句。
- 同一类元素用同一种形状和颜色。
- 箭头方向要稳定，少让读者绕路。
- 留白要舍得，图不是越满越专业。
- 最后再调字体、颜色和对齐。
手绘风格还有一个好处：它降低了精确感。
太正式的图，稍微没对齐就显得粗糙；手绘风格天然允许一点松动，读者也更容易把注意力放在关系上，而不是像素上。
不过这不代表可以乱画。手绘感不是潦草，仍然要有清楚的层级和节奏。真拿笔画过就知道，手绘要好看其实很难。Excalidraw 是给了普通人一点白板表达能力，不是免除了表达能力。
图要和文章一起长出来
技术文章里的图，不应该是写完以后硬塞进去的装饰。
更好的状态是，写到某个地方发现文字绕来绕去，读者可能要迷路，这时就该画图。图不是文章的花边，而是正文的一部分。
有些地方适合用图替代长段解释：
- 多个模块之间有调用关系。
- 一个请求经过很多步骤。
- 两个方案的差异需要并排看。
- 某个概念本身是空间结构。
- 某个问题的关键在边界，而不是细节。
也有些地方不适合画图。
比如观点判断、个人经历、价值取舍，文字反而更有力量。硬画一张“价值取舍模型图”，很容易把原本有血有肉的经验变成塑料流程。
所以画图不是越多越好。
一篇技术文章有一两张真正解决理解问题的图，比塞五张漂亮废话强。
工具只是最后一步
Excalidraw 是个好工具，但它不是画图能力本身。
真正重要的是先把事情想清楚：主角是谁，关系是什么，变化在哪里，边界在哪里，读者为什么需要这张图。
想清楚以后，工具只是把脑子里的结构搬出来。
没想清楚时，工具越强，越容易把人带偏。模板、图标、素材、渐变、阴影，全都在招手。画着画着，原本想解释一个问题，最后做成了一张看起来很忙的海报。
技术图最好的状态，是让读者忘了图本身。
他只是顺着图看下去，突然明白了：哦，原来这里是这样连起来的。
这就够了。