1. 从"diagram-design"这个标题里能读出什么
第一次看到"diagram-design"这个标题，我脑子里蹦出来的第一个判断是：这大概率不是一个单纯的"画图工具推荐"，而是一个关于图表设计方法论的项目。为什么这么说？因为如果只是推荐工具，标题通常会带上具体产品名，比如"用XX画架构图"；而"diagram-design"这种命名方式，更像是在描述一个设计体系或者设计思路——它关心的是"图该怎么设计"，而不是"用哪个软件画"。
我做过不少技术文档和架构图相关的工作，踩过的坑告诉我一件事：画图这件事，工具只占三成，剩下七成全在设计思维上。很多人拿到一个画图需求，第一反应是打开某个工具，然后开始拖方框、拉箭头，最后画出来的东西自己都不想看第二眼。问题不在于手笨，而在于脑子里没有一套"图表设计"的框架。
所以这篇内容，我想围绕"diagram-design"这个核心，把图表设计这件事拆开来讲。它适合谁看？我觉得有三类人：第一类是经常要画架构图、流程图、时序图的技术同学；第二类是需要做汇报材料、把复杂逻辑讲清楚的产品和运营同学；第三类是对信息可视化有兴趣、想让自己的图"看起来专业一点"的任何人。
在展开之前，先明确一个核心观点：好的图表设计，本质上是信息层级的设计。你画的不是图形，你画的是"读者看图的顺序"和"读者理解信息的路径"。这个认知一旦建立起来，后面所有的技巧都是围绕它服务的。
2. 图表设计的第一性问题：你到底想让读者先看哪里
2.1 大多数图"丑"的真正原因不是配色
我见过太多人把图画得不好看归咎于配色。于是他们去网上找配色方案，把一堆好看的色值往图里塞，结果图反而更乱了。这里的问题在于：配色是最后一步，不是第一步。一张图如果信息层级是乱的，你给它配再高级的颜色，它依然是乱的。
那什么是信息层级？简单说，就是读者视线的落点顺序。你希望读者第一眼看主流程，第二眼看分支，第三眼看注释——这个顺序如果在你画图之前没有想清楚，画出来的图就是"平"的，所有元素权重一样，读者的眼睛不知道该往哪放。
我自己的习惯是，动手画之前先在纸上（或者脑子里）回答三个问题：
- 这张图的主角是什么？是一条主流程、一个核心模块，还是一个对比关系？
- 读者看完这张图，必须记住的一件事是什么？
- 哪些信息是辅助的，哪些是干扰的？
这三个问题回答完，你会发现很多原本想画上去的东西，其实根本不需要画。图表设计的第一步是"删"，不是"加"。
2.2 用"视觉权重"给信息排优先级
视觉权重这个词听起来玄，其实很具体。影响视觉权重的因素就那么几个：大小、颜色对比、位置、留白、线条粗细。你把这几个变量控制好，信息层级自然就出来了。
举个我常用的做法。假设我要画一张系统架构图，里面有核心服务、辅助服务、外部依赖三类节点。我会这样处理：
| 元素类型 | 大小 | 颜色 | 位置 | 边框 |
|---|---|---|---|---|
| 核心服务 | 最大 | 深色填充 | 画面中央 | 粗边框 |
| 辅助服务 | 中等 | 浅色填充 | 核心周围 | 细边框 |
| 外部依赖 | 最小 | 灰色描边 | 画面边缘 | 虚线边框 |
这张表看起来简单，但它背后是一套可复用的决策逻辑。你不需要每次都凭感觉调，而是有一套规则：越重要的东西，视觉权重越高。这样画出来的图，读者一眼就能抓住重点，不需要你额外解释。
提示：视觉权重不要"全都要"。如果所有元素都加粗、都放大、都用高饱和色，那等于没有权重差异，读者的眼睛会累。
2.3 留白不是浪费，是给眼睛的呼吸空间
新手画图最容易犯的毛病之一，就是把画面塞满。每个角落都要放点东西，生怕浪费了空间。但留白恰恰是图表设计里最被低估的工具。
留白的作用有两个：一是分组，二是引导视线。两个元素之间留白大，读者自然认为它们不是一组的；留白小，读者自然认为它们关系紧密。这比画一堆分组框要优雅得多。
我个人的经验是，一张图里至少留出30%的空白区域。如果画完发现画面太满，第一反应应该是"我能不能删掉一些元素"，而不是"我能不能把元素缩小一点塞进去"。缩小元素只会让图更乱，删掉元素才是真正的解法。
3. 不同图表类型的设计逻辑完全不一样
3.1 流程图：重点在"路径清晰"，不在"框好看"
流程图是最常见的图表类型，也是最容易被画乱的。我见过很多流程图，方框画得圆润精致，箭头拐来拐去，最后读者根本找不到主路径在哪。
流程图设计的核心是路径清晰。什么叫路径清晰？就是读者能一眼看出"从哪开始、经过哪几步、到哪结束"。要做到这一点，有几个实操要点：
- 主路径尽量走直线。从左到右或者从上到下，一条主线走到底，不要来回折返。
- 分支要"短命"。分支一旦产生，尽快让它汇合回主线，不要让分支再分叉，否则图会指数级变复杂。
- 判断节点要少。一张流程图里判断节点超过三个，读者就开始晕了。如果逻辑真的很复杂，拆成两张图。
我自己的习惯是，画流程图之前先用文字把流程写一遍，写成"第一步做什么，如果怎样就怎样，否则怎样"的形式。文字写顺了，图自然就顺了。图是文字的视觉化，文字逻辑不通，图一定乱。
3.2 时序图：横向是时间，纵向是角色，别搞反
时序图（也叫序列图）是技术文档里的常客，但很多人画时序图的时候会把"时间"和"角色"的维度搞混。记住一个铁律：横向是时间轴，纵向是参与的角色。每个角色一条竖线，消息在竖线之间横向传递，从上往下代表时间流逝。
时序图最容易出问题的地方是消息太多。一个完整的调用链路可能有几十步，全画上去图就没法看了。我的处理方式是分层：先画一张"高层时序图"，只画主要角色和关键消息；如果读者需要细节，再针对某个环节单独画一张"详细时序图"。
另外，时序图里的激活条（就是竖线上那个细长的矩形）很多人不用，其实它很有价值。激活条表示"这个角色在这段时间里正在处理"，能帮读者理解哪个环节是耗时的、哪个环节是等待的。用好了，时序图的信息密度会高很多。
3.3 架构图：分层是王道，别把所有东西堆一层
架构图的设计逻辑和流程图、时序图又不一样。架构图的核心是分层。一个典型的系统架构图，至少应该能看出三层：接入层、逻辑层、存储层。如果所有模块都堆在同一层，读者看不出系统的结构。
分层之外，架构图还要处理边界。哪些模块属于同一个子系统，哪些是外部依赖，这些边界要用视觉手段表达出来。我常用的做法是用浅色背景块把同一子系统的模块框在一起，而不是用实线框。浅色背景块更轻，不会抢模块本身的视觉权重。
还有一个细节：架构图里的箭头要标清楚含义。是数据流向？是调用关系？是依赖关系？不同含义的箭头应该用不同的线型或颜色区分。我见过太多架构图，箭头画了一堆，但没人知道那箭头到底代表什么。
3.4 对比图：让差异"跳"出来，而不是让读者自己找
对比图（比如方案对比、版本对比）的设计逻辑又不同。对比图的核心是让差异自己跳出来。如果读者需要逐行阅读才能发现两个方案的差别，那这张对比图就是失败的。
我的做法是：把相同的部分弱化，把不同的部分强化。比如两个方案对比，相同的模块用灰色，不同的模块用高亮色。这样读者的眼睛会自动被高亮色吸引，一眼就能看到差异在哪。
对比图还有一个常见问题：维度不统一。比如对比两个方案，一个方案从性能角度讲，另一个方案从成本角度讲，读者根本没法比。对比图的前提是对比维度一致，这一点在动手画之前就要确认好。
4. 工具选型：别被工具绑架，先想清楚需求
4.1 工具分类：代码型、拖拽型、混合型
聊完设计逻辑，再说工具。市面上的图表工具大致分三类：
- 代码型：用文本描述图表，工具自动渲染。代表思路是"图即代码"。优点是版本可控、易于修改、适合放进文档；缺点是有学习成本，复杂布局不好控制。
- 拖拽型：所见即所得，鼠标拖拽画图。优点是上手快、自由度高；缺点是难以版本管理，改起来费劲。
- 混合型：既有代码描述能力，又支持可视化编辑。算是折中方案。
我自己的选择逻辑是这样的：如果这张图需要反复修改、需要进版本库，优先选代码型；如果是一次性的、追求快速出图，选拖拽型。不要用一种工具解决所有问题。
4.2 代码型工具的核心优势：可维护性
很多人不理解为什么要把图"写成代码"。我举个例子你就明白了。假设你画了一张架构图，三个月后系统加了一个模块，你需要更新这张图。如果是拖拽型工具，你得打开文件，找到位置，手动调整布局，可能还要重新对齐一堆元素。如果是代码型工具，你只需要在文本里加一行，重新渲染，布局自动调整。
这就是可维护性的差异。对于长期维护的技术文档来说，代码型工具的优势是压倒性的。而且代码型工具的图天然适合放进版本控制系统，每次修改都有记录，谁改的、改了什么，一目了然。
当然，代码型工具也有它的边界。高度定制化的视觉设计，代码型工具往往力不从心。比如你想做一个特别有设计感的封面图，那还是得用拖拽型工具或者专业设计软件。
4.3 选型时最容易忽略的三个问题
选工具的时候，大家通常只看"能不能画出我想要的图"。但有几个问题更容易被忽略：
第一，导出格式。你画的图最终要放到哪里？是放进文档、放进PPT，还是发到网页上？不同场景对导出格式的要求不一样。矢量格式（如SVG）适合文档和网页，位图格式（如PNG）适合PPT。如果工具不支持你需要的导出格式，画得再好也白搭。
第二，协作能力。这张图是你一个人画，还是团队一起维护？如果多人协作，工具是否支持多人编辑、是否有评论功能、是否能追踪修改历史，这些都很关键。
第三，长期可用性。这个工具会不会哪天就停止维护了？你的图会不会因为工具停服而打不开？对于重要的、需要长期保存的图，优先选择开放格式的工具，避免被单一工具锁定。
注意：不要因为某个工具"火"就选它。工具是为你服务的，不是你去适应工具。先明确自己的需求，再去找匹配的工具。
5. 实操中那些没人告诉你但很重要的细节
5.1 字体和字号：最容易被忽视的"隐形杀手"
图表设计里，字体和字号是最容易被忽视的部分。很多人画图的时候，默认字体用到底，字号全凭感觉。结果就是：标题和正文一样大，注释和标签一样小，读者根本分不清主次。
我的经验规则是这样的：
- 标题字号是正文字号的1.5倍左右。
- 正文字号保证在最终展示尺寸下清晰可读。如果是放进文档的图，正文字号不要小于10pt；如果是投影展示，不要小于14pt。
- 注释字号可以比正文小一号，但不要小太多，否则读者会直接跳过。
- 字体数量一张图里不要超过两种。一种用于标题，一种用于正文，足够了。
还有一个细节：中英文混排的时候要注意字体搭配。有些英文字体很好看，但配中文就灾难。如果图里有中文，优先选择对中文支持好的字体。
5.2 对齐：图看起来"专业"的秘密武器
如果只能给一条图表设计的建议，我会说：对齐。对齐是让图看起来专业的最快手段，没有之一。
人对齐不齐是极其敏感的，哪怕只差几个像素，眼睛也能察觉。一张图里如果元素东倒西歪，哪怕配色再好、内容再对，看起来就是"业余"。
实操上，我建议开启工具的对齐辅助功能，让元素自动吸附到网格或者参考线上。另外，同类元素一定要对齐：所有方框的左边缘对齐，所有箭头的起点对齐，所有标签的基线对齐。这些细节做到了，图的质感会立刻上一个台阶。
5.3 颜色：少即是多，对比即是清晰
配色这件事，我的观点很明确：一张图里的颜色不要超过五种（不包括黑白灰）。颜色越多，读者越难建立"颜色-含义"的对应关系。
配色的核心不是"好看"，而是"对比"。你需要确保相邻元素的颜色有足够对比度，否则读者分不清边界。同时，相同含义的元素用相同颜色，这样读者可以通过颜色快速识别元素类型。
还有一个实用技巧：用颜色的深浅表达层级，而不是用不同的色相。比如主模块用深蓝，次模块用浅蓝，这样既保持了视觉统一，又表达了层级关系。用红橙黄绿青蓝紫来表达层级，只会让图变成调色盘。
5.4 图例和标注：别让读者猜
图例和标注是图表的"说明书"。很多图的问题在于，作者自己知道每个符号代表什么，但读者不知道。凡是图里出现的符号、颜色、线型，如果含义不是显而易见的，就必须有图例。
标注也是同理。图里的关键节点、关键数据，该标就标。不要觉得"读者应该能看懂"，读者没有你的上下文，他们看不懂。标注的原则是：能减少读者思考的地方，就减少。
我自己的习惯是，画完图之后隔一天再看一遍。隔一天之后，你对这张图的"作者视角"会淡化，更容易用"读者视角"发现问题。很多当时觉得"显而易见"的地方，隔一天再看就会发现其实并不明显。
6. 从"能看"到"好用"：图表设计的进阶思路
6.1 图表也要考虑"使用场景"
一张图不是画完就结束了，它是要被使用的。使用场景不同，设计策略也不同。
如果这张图是放进文档里的，读者可以放大、可以慢慢看，那信息密度可以高一些，细节可以多一些。如果这张图是投影展示的，读者只有几秒钟时间看，那信息密度必须低，重点必须极其突出。如果这张图是印在纸上的，那要考虑黑白打印的效果，不能只依赖颜色来区分元素。
我见过很多人用同一张图应付所有场景，结果就是哪个场景都用不好。图表设计要"因场景制宜"，这一点在动手之前就要想清楚。
6.2 迭代：好图是改出来的，不是画出来的
没有人能一次画出完美的图。好图都是改出来的。我的习惯是至少改三版：第一版把内容画全，第二版调整布局和层级，第三版打磨细节（对齐、配色、字体）。
改图的时候，我建议换个角度看。比如把图缩小到50%看，如果缩小之后还能看清主结构，说明层级是清晰的；如果缩小之后一团糊，说明信息层级有问题。再比如把图转成黑白看，如果黑白状态下还能分清主次，说明你不仅仅依赖颜色来表达层级。
6.3 建立自己的"图表设计规范"
如果你经常画图，我强烈建议建立一套自己的图表设计规范。什么是规范？就是一套固定的规则：用什么字体、用什么配色、方框圆角多少、箭头多粗、留白多少。把这些固定下来，以后画图就不用每次都重新决策，效率会高很多，而且图与图之间风格统一，看起来更专业。
这套规范不需要多复杂，一页纸就够了。关键是要坚持用。用着用着，你会发现画图这件事从"每次都要纠结"变成了"按规则执行"，轻松很多。
7. 我踩过的那些坑
说几个我自己在图表设计上踩过的坑，都是血泪教训。
第一个坑：过度设计。刚开始画图的时候，总想把图做得"高级"，加阴影、加渐变、加立体效果。结果图看起来花里胡哨，但信息传达效率极低。后来才明白，图表设计的最高境界是"克制"。能用平面表达就不用立体，能用纯色就不用渐变，能删掉的效果就删掉。
第二个坑：信息过载。总觉得"这个信息也重要，那个信息也不能少"，最后图里塞满了东西。读者看完之后什么都没记住。后来我强迫自己执行一条规则：一张图只讲一件事。如果有多件事要讲，就画多张图。
第三个坑：忽视读者背景。我画图的时候默认读者和我一样了解背景，所以很多"显而易见"的东西没有标注。结果读者看不懂，来问我，我才发现原来他们不知道。现在我画图会假设读者完全不了解背景，该解释的地方都解释清楚。
第四个坑：工具依赖。有一段时间我特别依赖某个工具，所有图都用它画。后来那个工具改版了，我之前的图全乱了。从那以后，我尽量用开放格式，重要的图会同时保存源文件和导出文件，避免被工具绑架。
8. 给不同阶段的人一点实在建议
如果你是刚接触图表设计的新手，我的建议是：先从模仿开始。找一些你觉得好看的图，照着画一遍。画的过程中你会自然理解"为什么这里要这样处理"。模仿多了，手感就有了。
如果你已经能画出能看的图，但想更进一步，我的建议是：把注意力从"画图"转移到"信息设计"上。每次画图之前，先想清楚"读者是谁、读者需要什么、读者会怎么看这张图"。想清楚这些，图自然就画好了。
如果你已经在带团队或者做规范，我的建议是：把图表设计规范沉淀下来，变成团队共识。规范不需要完美，但需要统一。统一的规范能大幅降低沟通成本，也能让团队的产出看起来更专业。
图表设计这件事，说到底是一门关于"清晰"的手艺。工具会变，风格会变，但"让读者更快更准地理解信息"这个目标不会变。抓住这个目标，其他的都是手段。
