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. 给不同阶段的人一点实在建议如果你是刚接触图表设计的新手我的建议是先从模仿开始。找一些你觉得好看的图照着画一遍。画的过程中你会自然理解为什么这里要这样处理。模仿多了手感就有了。如果你已经能画出能看的图但想更进一步我的建议是把注意力从画图转移到信息设计上。每次画图之前先想清楚读者是谁、读者需要什么、读者会怎么看这张图。想清楚这些图自然就画好了。如果你已经在带团队或者做规范我的建议是把图表设计规范沉淀下来变成团队共识。规范不需要完美但需要统一。统一的规范能大幅降低沟通成本也能让团队的产出看起来更专业。图表设计这件事说到底是一门关于清晰的手艺。工具会变风格会变但让读者更快更准地理解信息这个目标不会变。抓住这个目标其他的都是手段。