1. 从diagram-design这个标题里能读出什么第一次看到diagram-design这个标题我脑子里蹦出来的第一个念头是这大概率不是一个单纯的画图工具项目而是一套关于图表设计的方法论或者设计系统。为什么这么说因为如果只是某个绘图库或者某个在线画图网站标题通常会带上具体的技术栈或者产品名比如xxx-diagram、draw-xxx之类。而diagram-design这个组合把图表和设计两个词并列放在一起指向的是一种更偏设计层面的东西——怎么把图表画得清楚、画得好看、画得让人一眼看懂。图表设计这件事看起来简单实际上是个深水区。我见过太多项目数据本身没问题逻辑也没问题但画出来的图就是让人看不下去配色辣眼睛、标注挤成一团、图例和图形对不上、层级关系混乱。这些问题不是技术能力不够而是设计意识缺失。所以当我拿到diagram-design这个标题时我默认它要解决的核心问题是如何用一套可复用的设计规则把图表从能看提升到好读。这篇文章适合几类人看一是经常需要画架构图、流程图、时序图的技术同学二是做数据可视化、需要出报表和图表的分析师三是任何在工作中需要用图来表达想法的人。不管你是用代码画图比如各种绘图库还是用工具拖拽画图底层的设计逻辑是相通的。我会从设计原则、配色体系、布局规则、标注技巧、常见坑这几个维度展开尽量把diagram-design这件事讲透。需要提前说明的是由于原始输入里没有具体的项目正文和关键词以下内容是基于图表设计这个主题结合我自己的实操经验做的合理展开。如果你手上的diagram-design是一个具体的代码库或设计系统那这些底层逻辑同样适用只是落地方式需要结合具体工具调整。2. 图表设计的第一性问题读者到底在看什么2.1 图表的本质是降低认知负荷不是展示数据很多人画图的时候脑子里想的是我要把这些信息都放上去于是图越画越大元素越堆越多最后变成一张信息密度极高但没人愿意看的海报。这是典型的出发点错了。图表的本质是降低读者的认知负荷。读者看你的图是为了快速理解一个结构、一个流程、一个关系而不是为了欣赏你的数据有多全。所以每增加一个元素你都要问自己这个元素是在帮读者理解还是在增加读者的负担我举个具体的例子。画一张系统架构图有人会把每个服务的端口号、部署机器、负责人、上线时间全标上去。这些信息有用吗有用但它们不属于架构图这个场景。架构图要回答的是系统由哪些部分组成、它们怎么交互端口号和负责人应该放在另一份文档里。把不该放的信息放进去就是增加认知负荷。一个实用的判断标准如果删掉某个元素读者理解核心信息会不会受影响不会那就删掉。2.2 三种最常见的图表类型设计重点完全不同图表设计不是一套规则打天下不同类型的图设计重点差异很大。我把它分成三类图表类型核心目的设计重点常见错误结构类架构图、组织图展示组成与层级层级清晰、分组明确层级混乱、连线交叉流程类流程图、时序图展示顺序与分支方向一致、分支可辨箭头乱指、回流线缠绕关系类ER图、网络图展示连接与依赖节点布局、连线可读节点重叠、连线成网结构类图最怕的是平铺所有节点长得一样大、一样颜色读者根本分不清主次。流程类图最怕的是方向不统一一会儿从左到右一会儿从上到下读者的眼睛要来回跳。关系类图最怕的是连线爆炸节点一多连线就变成一团乱麻。搞清楚你画的是哪类图再套用对应的设计重点比盲目追求好看有用得多。2.3 先定阅读路径再动手画这是我最想强调的一点也是很多新手最容易忽略的。在动手画之前先想清楚读者应该按什么顺序看这张图。人的阅读习惯是有规律的从左到右、从上到下。所以一张好的图表应该有一条清晰的阅读路径。比如画一张业务流程图主流程应该沿着从左到右的方向展开分支向下延伸异常处理放在边缘。读者顺着这条路径走一遍就能把整个流程理解清楚。如果阅读路径不清晰读者就会迷路。我见过一张图主流程从左上角开始走到中间突然拐到右下角然后又跳回左上角最后在中间结束。这种图读者看三遍都理不清顺序。实操建议画图之前先用纸笔或者白板把节点的顺序和位置大致排一下确认阅读路径顺畅再打开工具正式画。这个草稿步骤花五分钟能省掉后面半小时的调整。3. 配色不是审美问题是信息编码问题3.1 颜色在图表里承担的是分类和强调两个功能很多人以为配色是好不好看的问题其实在图表设计里颜色首先是一个信息编码工具。它主要承担两个功能分类用不同颜色区分不同类别。比如架构图里前端用蓝色、后端用绿色、数据库用橙色。强调用颜色突出关键节点。比如流程图中异常分支用红色标出。理解了这两个功能配色就有了判断标准颜色数量要克制颜色含义要一致颜色对比要足够。我见过最典型的错误是彩虹图——每个节点一个颜色七八种颜色混在一起读者根本记不住哪个颜色代表什么。颜色一多分类功能就失效了反而变成干扰。3.2 一套可复用的配色方案怎么搭如果你不想每次都纠结配色可以按下面的思路搭一套自己的配色模板第一步定主色。选一个中性、不刺眼的颜色作为主色用于大部分普通节点。深灰、藏蓝、墨绿都是不错的选择。主色的作用是打底不抢戏。第二步定分类色。根据你的图表通常分几类选2到4个分类色。分类色之间要有明显的色相差异比如蓝、绿、橙但饱和度和明度要接近避免某个颜色特别跳。第三步定强调色。选一个高饱和、高对比的颜色作为强调色比如正红、亮橙。强调色只用于最关键的少数节点用多了就失去强调的意义。第四步定背景和文字色。背景用白色或极浅的灰文字用深灰或黑色。文字和背景的对比度要足够高保证可读性。下面是一个可以直接参考的配色表用途颜色示例说明主色普通节点#4A5568中性深灰蓝不抢戏分类色1#3182CE蓝色用于一类节点分类色2#38A169绿色用于另一类节点分类色3#DD6B20橙色用于第三类节点强调色#E53E3E红色只用于关键节点背景色#FFFFFF纯白干净文字色#1A202C近黑可读性高这套配色不花哨但足够用。关键是同一套配色在你的所有图表里保持一致这样读者看你的图看多了会形成颜色记忆理解速度会越来越快。3.3 色盲友好一个容易被忽略但很重要的细节大约8%的男性有某种程度的色觉障碍最常见的是红绿色盲。如果你的图表用红色和绿色来区分两个类别这部分读者就完全分不清。解决办法有两个一是不要只靠颜色区分同时用形状、线型、标签来辅助。比如红色节点用实线框绿色节点用虚线框。二是选择色盲友好的配色比如用蓝色和橙色代替红色和绿色这两种颜色在大多数色觉障碍下都能区分。实操技巧把图转成灰度模式看一眼。如果转成灰度后还能区分不同类别说明你的设计不只依赖颜色是稳的。4. 布局与对齐图表专业感的来源4.1 对齐是廉价但极其有效的专业感来源一张图看起来专业还是业余很多时候就差在对齐上。业余的图节点位置随意间距忽大忽小连线歪歪扭扭。专业的图节点严格对齐间距均匀连线横平竖直。对齐这件事成本极低收益极高。你只需要在画图的时候打开工具的对齐辅助线功能让节点自动吸附到网格或者参考线上。就这么一个动作图的观感能提升一个档次。我自己的习惯是所有节点先按网格排布再微调。大部分绘图工具都支持网格吸附把网格设成10px或20px节点就会自动对齐。等整体布局满意了再关掉网格做局部微调。4.2 间距的呼吸感太挤和太散都是问题节点之间的间距直接决定了图的呼吸感。太挤读者觉得压抑信息挤在一起看不清太散读者觉得松散视线要跳很远才能找到下一个节点。我的经验值是同级节点之间的间距保持一致不同层级的间距略大于同级间距。比如同一层的三个节点间距设为40px层与层之间间距设为60px。这样读者能通过间距自然区分出层级关系。还有一个细节节点内部的留白。文字不要贴着边框四周留出至少8px的内边距。文字和边框贴太紧视觉上会显得局促。4.3 连线设计能直不弯能少不多连线是图表里最容易翻车的部分。我总结了几条原则能直不弯两点之间能用直线连接就不要用曲线。曲线看起来柔和但多了之后会显得杂乱。能正交不斜线在架构图和流程图里尽量用横平竖直的折线而不是斜线。正交线看起来更规整。能少不多连线数量要控制。如果两个节点之间有多条连线考虑合并或者用编号区分。避免交叉连线交叉是阅读的大敌。如果实在避不开用跳线一条线跨过另一条线时画个小弧来区分。一个排查技巧画完图后眯着眼睛看。如果连线部分看起来像一团乱麻说明连线设计有问题需要重新布局节点位置来减少交叉。4.4 分组与容器用视觉边界表达逻辑边界当图里的节点比较多时用容器一个带边框的矩形区域把相关的节点框起来能极大提升可读性。容器的作用是用视觉边界表达逻辑边界。比如画一张微服务架构图可以把所有属于用户服务的节点框在一个容器里容器上标用户服务域。这样读者一眼就能看出哪些节点是一组的。容器的设计要注意几点容器的边框要比节点边框细颜色要浅避免喧宾夺主容器的标题放在左上角字号略小于节点标题容器之间不要重叠留出足够间距。5. 标注与文字让图自己会说话5.1 标题要具体不要笼统图表的标题很多人随手写个系统架构图就完事了。但好的标题应该告诉读者这张图在讲什么。比如订单系统的核心服务与数据流向就比系统架构图信息量大得多。标题的写法对象 核心内容。对象是这张图描述的主体核心内容是这张图重点展示的部分。读者看标题就知道这张图值不值得细看。5.2 节点文字短、准、一致节点里的文字原则是短、准、一致。短能用两个字说清楚就不要用五个字。节点文字太长会撑大节点破坏布局。准用词要准确避免歧义。比如处理这个词太泛校验、转换、存储就具体得多。一致同类节点的文字风格要一致。要么都用动词要么都用名词不要混着来。如果节点文字确实需要比较长可以用主标题 副标题的形式主标题一行字号大一点副标题一行字号小一点颜色浅一点。5.3 图例什么时候需要什么时候不需要图例的作用是解释图中用到的符号、颜色、线型。但图例不是必须的。如果图里的编码方式很直观比如颜色和类别一一对应且类别名就在旁边那就不需要图例。需要图例的情况用了多种线型实线、虚线、点线表示不同含义用了多种颜色但颜色含义不能从上下文推断用了特殊符号。图例的位置一般在图的右下角或右上角不要放在图的中间干扰阅读。图例的样式要和图中元素保持一致颜色、线型都要对得上。5.4 注释把为什么写出来图表能表达是什么和怎么连但很难表达为什么。这时候就需要注释。比如一张架构图里某个服务旁边加一个小注释此处引入缓存是为了降低数据库压力。这个注释解释了设计决策对读者理解整个系统很有帮助。注释的写法要克制只写关键的、读者可能会疑惑的点。注释太多图就变成了文档失去图表的优势。6. 工具选型代码画图还是拖拽画图6.1 两类工具的适用场景画图工具大致分两类代码驱动和拖拽操作。代码驱动的工具比如各种基于文本描述生成图表的方案优点是版本可控、易于批量生成、适合放进代码仓库。缺点是学习成本高、调整样式不直观。拖拽操作的工具优点是上手快、所见即所得、调整灵活。缺点是版本管理麻烦、批量生成困难、样式一致性靠人工保证。我的建议是结构相对固定、需要频繁更新的图用代码驱动一次性、探索性的图用拖拽工具。比如系统架构图如果系统经常变用代码画改起来方便还能进版本控制。如果只是开会时随手画个草图拖拽工具更快。6.2 选工具时容易忽略的三个点第一导出格式。有些工具导出图片分辨率低放大就糊。选工具时确认支持导出矢量格式SVG、PDF这样无论怎么放大都清晰。第二协作能力。如果图需要多人编辑工具的协作功能就很重要。支持多人同时编辑、有评论功能的工具能省很多沟通成本。第三模板和组件库。如果工具自带常用的图形组件比如云服务的图标、常见的流程图符号画图效率会高很多。自己从零画每个图标太费时间。6.3 一个实用的工作流我自己的画图工作流是这样的草稿阶段用纸笔或者白板工具快速把节点和连线排出来确认逻辑和阅读路径没问题。正式绘制根据图的类型选工具。结构固定的用代码工具一次性的用拖拽工具。样式统一套用自己积累的配色模板和间距规范保证和之前的图风格一致。检查阶段转灰度看对比度眯眼看连线放大看对齐确认没问题再导出。归档把源文件存好方便后续修改。代码驱动的图直接进仓库拖拽工具的图存到统一的文件夹。这个流程看起来步骤多但熟练之后画一张图也就十几分钟比反复返工快得多。7. 那些年我踩过的图表设计坑7.1 坑一信息过载什么都想放这是我早期最常犯的错误。画一张图恨不得把所有相关信息都塞进去结果图变得极其复杂读者看一眼就放弃了。后来我想明白一个道理图表的价值在于取舍不在于全面。一张图只讲清楚一件事剩下的信息用文档补充。图是索引文档是详情。现在的做法是画图之前先列一个必须展示的清单只放最核心的信息。其他信息要么放到图外的注释里要么单独写文档。7.2 坑二颜色太多失去分类意义前面提过彩虹图的问题我自己也踩过。有一次画一张业务流程图为了区分不同部门用了六种颜色。结果读者反馈说颜色太多记不住哪个是哪个。后来我改成只用三种颜色区分三大类具体的部门用文字标签区分。颜色数量降下来之后图反而更清楚了。7.3 坑三连线交叉读者迷路连线交叉是布局问题但根子在节点位置。我早期的做法是先放节点再连线结果连线交叉严重。后来改成先规划阅读路径再按路径排节点交叉问题就少多了。如果实在避不开交叉我的处理方式是调整节点顺序把有连线的节点尽量放在相邻位置或者用跳线标记交叉点让读者知道这两条线不是连在一起的。7.4 坑四忽略移动端阅读现在很多图表是在手机或平板上看的。如果图很宽在手机上就要不停缩放和拖动体验很差。解决办法控制图的宽高比。尽量让图接近正方形或者竖长形避免超宽图。如果内容确实多考虑拆成多张图而不是硬塞进一张超宽图里。7.5 坑五不做版本管理改到崩溃用拖拽工具画图最大的痛点是版本管理。改了一版发现还是上一版好但已经回不去了。我的做法是重要的图每次大改之前先另存一个版本文件名带上日期。虽然土但管用。如果团队有条件用支持版本历史的工具更好。8. 把图表设计变成团队能力8.1 建立团队级的图表规范一个人画图好看不难难的是让团队里每个人都画得一致。这就需要建立规范。规范不用很复杂把最关键的几条定下来就行配色方案哪几种颜色分别代表什么、字体和字号标题多大、正文多大、间距规则同级间距多少、层级间距多少、连线规则用什么线型、箭头样式。规范定好之后做成模板。大家画图直接从模板开始省去每次调样式的时间也保证了风格统一。8.2 用图表评审提升整体水平我们团队有个习惯重要的图在正式使用前会做一次简单的评审。评审不看数据对不对只看读者能不能看懂。评审的问题很简单这张图的阅读路径是什么第一眼看哪里有没有让人困惑的地方颜色和连线有没有歧义这个习惯坚持下来团队整体的图表质量提升很明显。因为每个人都会从读者视角去审视自己的图而不是只从作者视角。8.3 积累可复用的图形组件画图多了会发现很多图形是重复的。比如数据库图标、用户图标、消息队列图标几乎每张架构图都会用到。把这些常用图形做成组件库画图的时候直接拖出来用效率高很多而且能保证同一个图标在所有图里长得一样。组件库的维护也简单每次画图遇到新的常用图形就加进去。时间长了组件库越来越丰富画图越来越快。9. 关于图表设计我最后想分享的几点体会图表设计这件事说到底是一个换位思考的过程。你画的每一张图都要站在读者的角度去审视他能不能看懂他会不会困惑他需要多长时间理解我自己的经验是画完图之后隔一天再看。刚画完的时候脑子里有完整的上下文觉得图很清楚。隔一天再看上下文忘了就能发现很多之前没注意到的问题。这个冷却期技巧帮我避免了很多自嗨式的图表。还有一个体会是不要追求一步到位。图表设计是一个迭代的过程第一版能表达清楚逻辑就行样式可以后面慢慢调。很多人卡在怎么配色上半天不动手其实先把结构画出来配色最后统一调效率高得多。最后图表设计的能力是可以练出来的。每次画完图多问几个人能不能看懂收集反馈下次改进。画个几十张之后你会发现自己的图越来越顺眼读者的理解速度也越来越快。这个正反馈循环一旦建立起来图表设计就不再是负担而是一种享受。