ICE's Tech Stack

Appearance

一支笔，讲清技术：用简笔画画愿景、画设计 ​

封面：一支笔在复杂的机器丛林前画出一座简单的桥

最近想试试一件事：不画正式的架构图，只用简笔画来讲技术愿景和技术设计。

几个小人、几个方框、几支箭头，能讲清多少东西？

试下来发现，简笔画容不下太多细节，反而会逼着人抓住三个问题：谁在场，关系是什么，什么变了。

画愿景，重点是“什么变了”；画设计，重点是“彼此如何关联”。这篇就从一套最简单的符号开始，边画边试。

上一篇《右脑先看见：技术愿景为什么不能从架构图开始》讲怎么“看见”愿景。这一篇接着讲，怎么把看到的画出来。

先备一套符号：10 个就够 ​

先不用担心自己不会画。技术简笔画靠的不是画功，而是一套稳定的符号：方框代表系统，圆柱代表数据，小人代表角色。读者看过一次，后面就不用再猜。

简笔画符号表：角色、系统、数据、外部、同步与异步、痛点、价值、边界、时延、权衡

先记住下面 10 个就够了：

  • 小人：角色。画面里最好总有人，没有人的图很难让人共情。
  • 方框、圆柱、云：系统、数据、外部或不确定的东西。
  • 实线箭头、虚线箭头：同步调用、异步消息。
  • 闪电、灯泡：痛点或故障、价值或亮点。
  • 墙和门、沙漏、天平：边界与权限、时延、权衡。

颜色也不必多：黑色画主体，一种颜色标重点，红色只留给问题。

画愿景：画人的变化，不画技术 ​

愿景不是回答“我们要建设什么”，而是回答“有了它，人的处境会发生什么变化”。因此，画面里的主角应该是人，技术退到后面。

最好用的画法是前后对比：

愿景草图：左边是被工具和故障包围的工程师，右边是同一个人一句话交代任务，几个小机器人协作完成

左边画今天：工程师被一堆工具和故障包围。右边画三年后：同一个人只说一句话，几个智能体便协作把事情办完。

没有技术名词，也能看出用户是谁、今天哪里难、未来哪里不同。实现方案可以变，这个画面不必跟着变。

除了前后对比，还有三种常用画法：

  • 三格漫画：现状、转折、未来。中间那一格就是你的技术。
  • 旅程图：从左到右一条路，沿途插旗子表示里程碑。适合讲路线图。
  • 单一隐喻：桥表示连接，地基表示平台，引擎表示驱动力。只用一个，不要混用。

检验方法只有一句话：遮住文字，别人还能不能看出谁、从什么状态、变成了什么状态。

画设计：一层一层放大 ​

到了技术设计，问题从“什么变了”切换为“怎么实现”。信息多，一张图塞不下，那就分层画。

设计草图：从上下文到组件再到流程，逐层放大

这里借用了软件架构中的 C4 模型。C4 是上下文（Context）、容器（Container）、组件（Component）和代码（Code）四个层次，像地图一样逐级放大。简笔画可以先简化成三层：

  1. 上下文：整个系统画成一个框，四周是用户和外部系统。只画箭头，不画内部。
  2. 组件：把框打开，拆成 3 到 7 个模块，标出数据放在哪里。超过 7 个，就再拆一层。
  3. 流程：一次请求怎么走完。用几个小人互相传纸条来画，比标准时序图好懂得多。

箭头上尽量写动词，例如“校验”“分发”“缓存”。方框说明“有什么”，箭头说明“怎么协作”。

把“为什么”画出来 ​

结构画清以后，再补两件更重要的事：哪里会断，为什么这么选。

失败场景与权衡：一条链路被闪电击断后如何重试、降级、绕路；天平向可用性倾斜，允许短暂不一致

失败场景图：在可能中断的箭头上画一道闪电，再画出重试、降级或绕路。

权衡图：画一个天平，两端写上一致性和可用性，再标出倾向哪边、为什么。原本藏在各自心里的取舍，就被摆到了桌面上。

五步上手 ​

  1. 先写一句话。 这张图想让人记住什么？写不出来，就先别动笔。
  2. 找主角和冲突。 谁在受苦？卡在哪里？设计图里，冲突就是约束条件。
  3. 画三版草图。 每版不超过两分钟，挑最清楚的一版。
  4. 讲给外行听。 对方能复述出来，图就有效。
  5. 最后再上色和标注。 多留白，宁可少画一个框。

纸笔和白板最快；要做电子版，可以用 Excalidraw 或 tldraw。用 AI 生成时，先在提示词里约定符号、颜色和线条风格，避免每张图长得都不一样。

如果图中节点和连线必须严格准确，可以先用 JSON 描述结构，再交给程序渲染，详见《Diagram as Code：用 JSON 生成架构图的 AI 工作流》。

几个常见误区 ​

  • 画成了架构图。 方框越堆越多，简笔画就失去了意义。
  • 画面里没有人。 愿景显得冷冰冰，设计也看不出为谁服务。
  • 一张图塞多个观点。 一图一意，讲完再换下一张。
  • 追求好看。 线条歪一点没关系，清楚比美观重要。

小结 ​

  • 简笔画的价值是做减法。 它逼你只保留角色、关系、冲突和变化。
  • 画愿景，画人的变化。 前后对比最有力，遮住文字也要看得懂。
  • 画设计，逐层放大。 每层 3 到 7 个元素，并把失败场景和权衡画出来。

不妨拿出一张白纸试一次：如果只能画五个框、两个小人，你会画什么？

本文部分内容由 AI 辅助生成，经人工审校和补充后发布。

参考资料 ​

  1. Dan Roam，《The Back of the Napkin: Solving Problems and Selling Ideas with Pictures》，Portfolio，2008。
  2. Simon Brown，《The C4 model for visualising software architecture》 — https://c4model.com/
  3. Excalidraw — https://excalidraw.com/
  4. tldraw — https://www.tldraw.com/