1. 从“diagram-design”这个标题里能读出什么第一次看到“diagram-design”这个标题我脑子里蹦出来的不是某个具体工具而是一类非常典型的工作场景手里有一堆零散的信息——业务流程、系统模块、数据流向、组织关系——需要把它们变成一张别人一眼能看懂的图。这件事听起来简单真正做过的人都知道画图容易设计图难。画图是把线连起来设计图是让信息在视觉上自己会说话。“diagram-design”这个标题本身没有给出太多约束正文和关键词都是空的这反而给了很大的解读空间。我的判断是它指向的是图表设计的方法论与实践而不是某一个特定软件的操作教程。换句话说它关心的核心问题是一张图为什么好看、为什么好懂、为什么别人愿意看下去。围绕这个核心会牵扯出信息层级、视觉编码、布局逻辑、配色体系、工具选型、协作交付等一系列具体问题。这篇文章适合几类人看。第一类是经常需要画架构图、流程图、时序图的技术同学你们可能已经会用工具但总觉得画出来的东西“差点意思”。第二类是产品、运营、咨询方向的朋友你们需要把复杂逻辑讲清楚图是最重要的表达媒介之一。第三类是对信息设计感兴趣、想系统提升视觉表达能力的任何人。我会尽量把原理讲透同时给出可以直接上手的方法和参数让不同基础的人都能拿走点东西。需要先说明一点图表设计不是一个“审美天赋”问题它更像是一门有规则可循的手艺。规则掌握了普通人也能做出专业水准的图规则不掌握再有天赋也是在碰运气。接下来的内容我会按照“先想清楚、再画出来、最后交付好”这条主线展开中间穿插大量实操细节和我自己踩过的坑。2. 画图之前先想清楚信息层级比线条更重要2.1 一张图只讲一件事我见过太多“什么都想说”的图。一张架构图上同时画了部署拓扑、数据流向、调用关系、团队归属还用不同颜色标注了优先级。结果就是看的人第一眼就懵了不知道该从哪里看起。这种图的根本问题不是画得不好而是没有确定唯一的叙事主线。图表设计的第一个原则我称之为“一图一叙事”。你在动手之前必须能用一句话说清楚这张图要表达什么。比如“这张图展示用户从下单到收货的完整流程”或者“这张图说明三个服务之间的依赖关系”。如果一句话说不清楚说明你还没想清楚这时候画出来的图一定是混乱的。具体操作上我习惯在画图前先写一个“图注草稿”——就是假设这张图已经画好了你会怎么用一段话向别人介绍它。这段话就是图的叙事主线。写不出来就别急着打开工具。这个习惯帮我省下了大量返工时间因为很多问题在文字阶段就暴露了。提示如果你发现一句话里出现了“同时”“另外”“还包括”这类词说明你想塞进一张图的信息太多了考虑拆成两张图。2.2 信息分层的三个维度确定叙事主线之后下一步是给信息分层。我通常从三个维度来切分重要性、时序性、归属关系。重要性维度解决的是“什么该突出、什么该弱化”。一张图里核心节点应该占据视觉重心辅助信息应该退到背景。具体手段包括大小对比、颜色对比、位置对比。人的眼睛天然会被大、亮、居中的元素吸引这是可以利用的规律。时序性维度解决的是“先看什么、后看什么”。流程图、时序图这类有时序关系的图必须让阅读方向一目了然。从左到右、从上到下是最符合大多数人阅读习惯的方向。如果图里有分支和循环要用视觉手段把主路径和异常路径区分开比如主路径用粗线、异常路径用细线或虚线。归属关系维度解决的是“谁和谁是一伙的”。分组、边框、背景色块都是常用的手段。这里有个容易犯的错误分组框套太多层导致图里全是框反而看不清内容。我的经验是分组层级不要超过两层超过两层就说明这张图承载的信息量过大了。2.3 先画草图再上工具很多人习惯直接打开绘图工具开始拖拽边拖边想。这个流程效率极低因为工具的操作成本会干扰你的思考。更合理的做法是先用纸笔或者白板画出草图把节点、连线、分组都确定下来再上工具做视觉细化。草图阶段不需要好看只需要把逻辑关系理清楚。我经常用便利贴来画草图因为便利贴可以随时移动、重新组合特别适合探索阶段。等逻辑稳定了再转移到数字工具里。这个“先纸后屏”的流程至少能节省一半的返工时间。草图的另一个好处是它强迫你面对信息量的问题。纸上空间有限画不下就是画不下你会自然地做减法。而在数字工具里画布可以无限延伸很容易就越画越多最后收不住。3. 视觉编码让图形自己会说话3.1 形状不是随便选的在图表设计里每个形状都携带语义。圆形通常代表起点、终点或独立实体矩形代表处理步骤或模块菱形代表判断分支圆柱体代表数据存储。这些约定俗成的语义不是随便定的而是长期实践沉淀下来的认知习惯。遵循这些习惯读者不需要额外学习就能理解你的图。但约定俗成不代表不能打破。关键在于如果你要打破惯例必须有明确的理由并且在整个图里保持一致。比如你用圆角矩形表示服务、直角矩形表示数据库那就全图都这么用不能一会儿圆角一会儿直角。一致性是图表可读性的基石。我见过一个反面案例一张图里用同一种矩形表示了三种完全不同的东西——前端组件、后端服务、第三方接口。读者根本分不清哪个是哪个只能靠猜。这种图就是典型的“画了等于没画”。3.2 颜色是信息编码不是装饰颜色在图表里的作用被严重低估了。很多人把颜色当成“让图好看”的手段随便选几个顺眼的颜色就用上了。实际上颜色是最强的信息编码工具之一用好了能大幅降低理解成本用错了会制造混乱。我的配色原则是“一个主色、一个强调色、一组中性色”。主色用于大部分常规元素强调色用于需要突出的关键节点中性色用于背景、边框、辅助文字。这样整个图的色彩层次是清晰的读者的注意力会被自然地引导到该看的地方。具体到色值选择我通常用 HSL 来调色因为比 RGB 直观得多。主色选一个中等饱和度的蓝色或蓝灰色比如hsl(210, 60%, 50%)。强调色选一个对比明显的暖色比如橙色hsl(25, 90%, 55%)。中性色用不同明度的灰色从hsl(0, 0%, 95%)到hsl(0, 0%, 30%)拉开层次。注意如果你要把图放在深色背景上展示配色需要整体调整。深色背景上低饱和度的颜色会显得脏需要适当提高饱和度和明度。这个细节很多人会忽略导致图在投影仪上看起来灰蒙蒙的。3.3 文字排版决定图的专业度图表里的文字排版是区分“业余”和“专业”的关键细节。业余的图文字大小不一、对齐混乱、行距随意。专业的图文字层级分明、对齐精准、留白得当。文字层级一般分三级标题、标签、注释。标题用最大字号加粗用于图的整体说明。标签用中等字号用于节点名称。注释用最小字号用于补充说明。三级之间的字号差距要明显至少相差 2-4pt否则层级出不来。对齐方面节点内的文字要居中对齐节点之间的文字基线要对齐。如果做不到基线对齐至少保证同一行的节点文字在垂直方向上居中。这个细节看起来微不足道但读者的大脑会捕捉到这些不一致产生“说不清哪里不对但就是不舒服”的感觉。留白同样重要。文字和边框之间要有足够的内边距我通常用节点高度的 20%-30% 作为内边距。文字和文字之间要有行距行距至少是字号的 1.4 倍。这些参数不是死规定但有一个下限低于下限就会显得拥挤。4. 布局逻辑好图的骨架长什么样4.1 网格系统是布局的地基专业图表和业余图表在布局上最大的区别就是有没有网格系统。网格系统是一组隐形的参考线所有元素都对齐到这些线上。有了网格图就有了秩序感没有网格元素就会东倒西歪。我常用的网格是 8px 基准网格。所有元素的尺寸、间距、位置都是 8 的倍数。为什么是 8因为 8 能被 2 和 4 整除缩放和适配都比较方便。当然12px 或 10px 的网格也有人用关键是选定一个基准后严格执行。实际操作中你不需要真的画出网格线但心里要有这个网格。在 Figma 或 Sketch 这类工具里可以开启布局网格功能让工具帮你对齐。在 draw.io 或 Excalidraw 这类工具里可以开启网格吸附。工具能帮你做的事就不要靠肉眼去判断。4.2 从左到右、从上到下的阅读动线人的阅读习惯是从左到右、从上到下的。图表布局应该顺应这个习惯而不是对抗它。主流程从左到右展开分支从上到下排列这是最自然的布局方式。如果图的内容特别多需要分区域可以用“Z 字形”或“F 字形”的动线来组织。Z 字形适合内容较少的图视线从左上到右上再斜到左下再到右下。F 字形适合内容较多的图视线先横向扫过顶部再纵向扫过左侧再横向扫过中部。这里有个反直觉的点居中对齐不一定是最好的选择。对于流程图和架构图左对齐往往比居中对齐更清晰因为左对齐能形成一条明确的阅读起始线。居中对齐适合对称结构的图比如组织架构图、思维导图。4.3 连线是布局的一部分连线不是画完节点之后才考虑的事它应该和节点布局一起规划。连线的走向、长度、交叉情况直接影响图的可读性。我的经验是尽量减少连线的交叉。交叉线会让读者困惑不知道哪条线连到哪里。如果实在无法避免交叉可以用“跳线”的方式让一条线在另一条线上方跨过用一个小弧线表示不相交。draw.io 和 Lucidchart 都支持跳线功能。连线的长度也要控制。过长的连线会让图显得松散过短的连线会让图显得拥挤。理想情况下相邻节点的连线长度应该大致相等这样图看起来才均衡。如果两个节点之间距离太远可以考虑调整节点位置或者增加中间节点。还有一个细节连线的箭头方向要统一。要么都用箭头要么都不用。如果有的线有箭头有的没有读者会困惑于“这条线到底有没有方向”。对于无向关系用无箭头直线对于有向关系用带箭头直线。这个规则要全图一致。5. 工具选型不同场景用不同的家伙5.1 快速草图用 Excalidraw 或白板如果你处于探索阶段逻辑还没完全确定需要快速画草图Excalidraw 这类手绘风格的工具是最合适的。它的优势在于“不精确”——手绘风格天然地告诉读者“这是草图不是最终稿”降低了别人对你图的完美度期待。同时手绘风格也让你自己不那么纠结于细节更专注于逻辑。Excalidraw 的另一个好处是协作方便。你可以把链接分享给同事大家实时在上面涂改。这种低门槛的协作方式特别适合头脑风暴和方案讨论阶段。5.2 正式交付用 draw.io 或 Figma当逻辑确定、需要输出正式图时我会切换到 draw.io 或 Figma。draw.io 的优势是免费、跨平台、支持各种图表类型而且有丰富的模板库。Figma 的优势是设计能力强、组件系统完善、适合需要精细控制的场景。选择哪个取决于你的具体需求。如果图需要嵌入文档、需要频繁修改、需要多人协作draw.io 更合适。如果图需要和 UI 设计保持一致、需要精细的视觉控制、需要做成设计系统的一部分Figma 更合适。我个人的工作流是Excalidraw 画草图 → draw.io 做正式图 → 导出 SVG 嵌入文档。SVG 格式的好处是矢量、可缩放、文件小而且在大多数文档工具里都能正常显示。5.3 代码生成图表的场景有一类特殊场景图需要随代码变化而自动更新。比如系统架构图如果服务之间的依赖关系变了图也应该跟着变。这种情况下用代码生成图表是更好的选择。常用的方案有 Mermaid、PlantUML、Graphviz。Mermaid 的语法最简洁适合流程图、时序图、状态图。PlantUML 支持的图表类型更多适合 UML 类图、组件图。Graphviz 的布局算法最强适合复杂的关系网络。代码生成图表的代价是视觉控制力弱。你很难精确控制每个节点的位置和样式。所以这类工具适合“逻辑正确比好看更重要”的场景比如技术文档里的架构图。如果图需要对外展示、需要视觉冲击力还是手动设计更好。工具适用场景优势局限Excalidraw草图、头脑风暴手绘风格、协作方便不适合正式交付draw.io正式图表、文档嵌入免费、模板丰富视觉控制一般Figma精细设计、设计系统视觉控制强、组件化学习成本较高Mermaid代码生成、技术文档语法简洁、自动布局视觉控制弱Graphviz复杂关系网络布局算法强语法较复杂6. 踩坑实录那些年我画废的图6.1 信息过载一张图塞了三个故事我做过一张系统架构图想把部署架构、数据流、调用关系都画进去。结果画完之后自己看了五分钟才找到想找的东西。拿给同事看同事第一句话是“这图信息量好大”第二句话是“但我不知道从哪里看起”。问题出在我试图用一张图讲三个故事。部署架构是一个故事数据流是另一个故事调用关系又是第三个故事。这三个故事虽然相关但叙事主线不同硬塞在一起只会互相干扰。后来我把这张图拆成了三张一张部署架构图、一张数据流图、一张调用关系图。每张图只讲一个故事每张图都能在十秒内看懂。拆图之后不仅别人看得懂了我自己维护起来也轻松了因为改一个地方不用考虑对其他故事的影响。这个教训让我明白图的复杂度不是信息量的函数而是叙事清晰度的函数。信息多不可怕可怕的是没有清晰的叙事主线。6.2 颜色滥用彩虹图看起来像儿童画早期我画图喜欢用很多颜色觉得颜色多显得丰富。结果画出来的图五颜六色像儿童画。更糟糕的是颜色多了之后颜色本身失去了信息编码的功能——当所有东西都是彩色的就没有东西是突出的。后来我强制自己限制颜色数量一张图最多用三种颜色不含黑白灰。一种主色、一种强调色、一种辅助色。这个限制逼着我去思考“什么才是真正需要突出的”而不是靠颜色来区分所有东西。限制颜色之后图的专业度立刻上了一个台阶。因为颜色少了每种颜色的含义就清晰了。读者看到橙色就知道是重点看到蓝色就知道是常规不需要额外解释。6.3 对齐强迫症为了对齐牺牲可读性有一段时间我特别执着于对齐所有节点必须严格对齐到网格连线必须横平竖直。结果画出来的图确实整齐但可读性反而下降了。因为为了对齐我把一些逻辑上应该在一起的节点拆开了把一些应该弯曲的连线强行拉直了。后来我想明白了对齐是手段不是目的。对齐的目的是让图更清晰如果对齐反而让逻辑关系变模糊了那就本末倒置了。现在我的做法是“逻辑优先对齐其次”——先保证逻辑关系正确再在逻辑允许的范围内尽量对齐。具体来说我会先按逻辑关系摆放节点然后再微调位置让它们尽量对齐。如果某个节点为了对齐需要移动很远导致连线变得很长很绕那我就放弃对齐让它待在逻辑上更合理的位置。6.4 字体陷阱换了字体图就崩了有一次我精心设计了一张图在自己的电脑上看起来完美。发给同事之后同事说“你这图怎么文字都溢出了”。我打开一看确实所有节点的文字都超出了边框。原因是我用的字体同事电脑上没有系统自动替换成了另一个字体而替换后的字体更宽导致文字溢出。这个坑让我养成了一个习惯交付图的时候要么把文字转成路径要么用系统通用字体。转成路径的好处是绝对保真坏处是文字不可编辑。用系统通用字体的好处是可编辑坏处是视觉效果可能打折扣。我的选择是如果图需要别人编辑用系统通用字体比如 Arial、Helvetica、思源黑体如果图只是展示用转成路径。SVG 格式支持文字转路径导出的时候勾选这个选项就行。7. 交付与协作图不是画完就完了7.1 导出格式的选择图表画完之后导出格式的选择直接影响使用体验。常见的格式有 PNG、SVG、PDF。PNG 适合快速分享和即时通讯工具发送但不支持缩放放大了会模糊。导出 PNG 的时候分辨率至少设成 2x这样在高分屏上看起来才清晰。SVG 适合嵌入网页和文档矢量格式无限缩放不模糊。但 SVG 的兼容性需要注意有些老旧的文档工具不支持 SVG或者支持得不好。导出 SVG 的时候注意把文字转成路径避免字体缺失问题。PDF 适合打印和正式文档矢量格式兼容性好。但 PDF 不方便在网页上直接显示需要额外的查看器。我的习惯是同时导出 SVG 和 PNG 两个版本。SVG 用于文档嵌入PNG 用于快速分享。如果图特别复杂还会导出一份 PDF 作为存档。7.2 源文件的管理图不是一次性的东西它需要维护和更新。所以源文件的管理很重要。我的做法是每张图都有一个对应的源文件命名规则是“日期-项目名-图名”比如“20250115-订单系统-架构图.drawio”。所有源文件放在同一个文件夹里按项目分子文件夹。源文件里要保留完整的编辑信息包括节点、连线、文字、颜色。不要为了“看起来干净”而删除辅助元素比如参考线、备注。这些信息在后续修改时很有用。如果图需要多人协作建议用支持版本控制的工具。Figma 自带版本历史draw.io 可以配合云盘做版本管理。每次修改前先保存一个版本这样出问题了可以回滚。7.3 给图配一段说明文字图再好也需要文字辅助。因为图是概括性的很多细节无法在图上展开。所以交付图的时候最好配一段说明文字解释图的背景、目的、关键节点、阅读顺序。说明文字不用太长三五百字就够了。结构可以是这张图展示什么、阅读顺序是什么、关键节点有哪些、有哪些需要注意的地方。这段文字可以放在图的旁边也可以放在图的下面或者作为文档的一部分。我见过很多图画得不错但没有说明文字读者只能自己猜。猜对了还好猜错了就产生误解。加一段说明文字成本很低收益很高。8. 从“会画图”到“会设计图”的进阶路径8.1 建立自己的图表组件库当你画了足够多的图之后会发现很多元素是重复的同样风格的矩形、同样样式的箭头、同样配色的标签。这时候建立自己的图表组件库就很有价值了。组件库的好处是保证一致性。所有图都用同一套组件视觉风格自然统一。另一个好处是提高效率。画新图的时候直接拖组件不用从头调样式。组件库不需要很复杂从最常用的元素开始一个标准节点、一个强调节点、一个分组框、一条实线箭头、一条虚线箭头。把这些元素的样式固定下来存成模板。以后画图直接复用。Figma 的组件系统最适合做这件事draw.io 也支持自定义形状库。如果工具不支持组件库可以做一个“模板文件”里面放好所有标准元素每次画新图就从模板文件复制。8.2 培养“图感”的日常训练“图感”这个东西听起来玄乎其实就是对视觉信息的敏感度。看到一张图能快速判断它好在哪里、差在哪里。这种能力可以通过日常训练来培养。我的训练方法是每天花十分钟看一张优秀的图然后问自己三个问题——这张图想表达什么它是怎么表达的如果让我改我会改哪里坚持一段时间之后你会发现自己对图的判断力明显提升。优秀的图从哪里来产品文档、技术博客、设计网站、说明书、地铁线路图都是很好的素材。特别是地铁线路图它是信息设计的经典案例用极简的视觉语言表达了复杂的网络关系非常值得研究。8.3 接受反馈并迭代图是给人看的所以别人的反馈很重要。但反馈也要会听。有些人说“不好看”可能只是审美偏好不同有些人说“看不懂”那就是真的有问题。我的做法是找三到五个目标读者让他们看图然后观察他们的反应。如果他们第一眼就能找到重点说明图是清晰的如果他们看了半天还在找说明图有问题。不要问“你觉得怎么样”要问“你能告诉我这张图在说什么吗”。后者的答案更能反映图的真实可读性。收到反馈之后不要急着改。先判断反馈的类型是逻辑问题、视觉问题、还是信息缺失。逻辑问题优先改视觉问题其次信息缺失最后。因为逻辑问题影响理解视觉问题影响体验信息缺失影响完整性。9. 一些零散但实用的经验关于图表设计还有一些零散的经验不成体系但很实用一并分享出来。关于节点命名节点名称要具体不要用“模块A”“服务B”这种模糊的命名。用“订单服务”“支付网关”“用户数据库”这种一看就知道是什么的名字。如果名称太长可以用缩写但要在图例里说明。关于图例如果图里用了颜色、形状、线型来编码信息一定要加图例。图例放在图的角落不要放在中间。图例的样式要和图里的元素一致不要图例是一种颜色、图里是另一种颜色。关于版本标注如果图会多次修改建议在图的角落标注版本号和日期。这样别人拿到图的时候知道这是哪个版本不会用错。关于打印如果图需要打印注意颜色在打印时的表现。深色背景在打印时会消耗大量墨水而且效果不好。打印用的图建议用浅色背景、深色文字。另外打印时线条不要太细至少 0.5pt否则打印出来会断断续续。关于无障碍如果图需要给色觉障碍的人看不要只靠颜色来区分信息。可以同时用形状、纹理、标签来辅助。比如用实线表示主流程、虚线表示异常流程这样即使看不出颜色差异也能区分。关于图的尺寸图的尺寸要适配展示场景。如果图要在手机上显示节点和文字都要放大因为手机屏幕小。如果图要在投影仪上显示对比度要调高因为投影仪的色彩表现通常不如显示器。关于图的更新图不是画完就完了它需要随着实际情况更新。建议每季度检查一次图看看有没有过时的信息。过时的图比没有图更糟糕因为它会误导人。关于图的分享分享图的时候尽量分享源文件或 SVG而不是截图。截图会丢失信息而且不方便别人修改。如果只能分享图片至少分享高分辨率的版本。关于图的版权如果图里用了别人的图标或素材注意版权问题。尽量用开源素材或者自己画。如果用了有版权的素材要注明来源。关于图的命名图的文件名要能说明图的内容不要用“未命名”“新建文件”这种名字。好的命名是“订单系统-数据流图-20250115”一看就知道是什么。关于图的备份源文件要备份至少存两个地方。我见过太多人因为电脑坏了、云盘同步出问题丢失了重要的源文件。备份的成本很低丢失的代价很高。关于图的评审重要的图发布前找相关方评审一下。评审的重点不是好不好看而是信息准不准确、逻辑对不对。图里的信息错了画得再好看也没用。关于图的迭代图是迭代出来的不是一次画好的。第一版可能很粗糙第二版改进布局第三版调整配色第四版优化文字。不要指望一次就画出完美的图接受迭代的过程。关于图的简化如果一张图怎么改都觉得乱考虑简化。删掉不重要的节点合并相似的节点去掉不必要的连线。简化之后图往往会清晰很多。记住图的目标是传达信息不是展示所有信息。关于图的风格图的风格要匹配使用场景。技术文档里的图风格应该严谨、简洁。营销材料里的图风格可以活泼、有视觉冲击力。内部讨论用的图风格可以随意、手绘。不要用同一种风格应对所有场景。关于图的工具工具是手段不是目的。不要纠结于用哪个工具能用顺手的就是好工具。也不要频繁换工具每个工具都有学习成本换来换去反而浪费时间。选定一个主力工具深入研究比浅尝辄止地试十个工具更有价值。关于图的学习图表设计是一门可以学习的技能。推荐几本对我影响比较大的书《信息简史》讲信息设计的历史和原理《写给大家看的设计书》讲设计的基本原则《用图表说话》讲商业图表的制作方法。这些书不厚但内容很扎实值得反复看。关于图的实践看再多书不如动手画一张。找一张你觉得不好的图试着改进它。改完之后对比原图和改后的图看看哪些改动有效、哪些无效。这种对比练习是提升图表设计能力最快的方式。关于图的心态最后说一点心态。图表设计不是天赋是手艺。手艺的特点是只要练习就会进步。不要因为一开始画得不好就放弃也不要因为画得好了就停止学习。保持练习保持观察保持迭代你的图会越来越好。
