1. 从diagram-design这个标题能读出什么第一次看到diagram-design这个标题我脑子里蹦出来的第一个念头是这大概率不是一个单纯的画图工具项目而是一套关于图表设计的方法论或者设计系统。为什么这么判断因为如果只是某个绘图库或者某个在线画图网站标题通常会带上具体的技术栈或者产品名比如xxx-draw、xxx-chart之类。而diagram-design这种命名方式更像是把diagram图表当成一个设计对象把design设计当成一个动作或者一套规范合起来就是如何设计图表这件事本身。图表设计这件事看起来简单实际上是个深水区。我见过太多项目功能逻辑写得漂漂亮亮一到画架构图、流程图、时序图就抓瞎——要么线条交叉得像一团乱麻要么颜色搭配得让人眼睛疼要么层级关系完全看不出来。更常见的情况是图是画出来了但换个人来看根本读不懂因为画图的人默认我懂的别人也懂结果信息传递效率极低。所以这篇内容我想围绕diagram-design这个核心把图表设计从随手画提升到有章法的层面来聊。不管你是做技术架构图、业务流程图、数据流向图还是产品原型里的示意图底层的那套设计逻辑是相通的。我会从图表的本质目的讲起拆解一套可复用的设计流程再落到具体的工具选型、配色规范、排版技巧最后分享一些我踩过的坑和总结出来的经验。适合谁看如果你是开发者、产品经理、技术文档写作者、或者任何需要用图说话的人这篇内容应该能帮你少走不少弯路。如果你已经画了很多图但总觉得差点意思那更值得往下看——问题往往不在工具而在设计意识。2. 图表设计的本质不是画得好看而是让人看懂2.1 图表的唯一KPI是信息传递效率很多人对图表设计有个误解觉得好看是第一位的。我早期也这么想过花大量时间调颜色、调圆角、调阴影结果图是挺漂亮但同事看完还是问我这个箭头到底指向哪。后来我才明白图表的第一性原理是降低信息传递的损耗。一张图如果能让人在3秒内抓住核心结构它就是好图如果让人盯着看30秒还在猜那再好看也是失败的。这个认知转变很关键。它意味着你在设计图表时第一个要问自己的问题不是用什么颜色而是这张图要传递的核心信息是什么。是层级关系是数据流向是时间顺序还是模块依赖不同的信息类型对应的图表形态和设计重点完全不同。比如层级关系适合用树状图数据流向适合用带箭头的连线图时间顺序适合用泳道图或时序图。选错形态后面怎么调都是事倍功半。2.2 三种最常见的图表信息类型及其设计侧重我把日常工作中遇到的图表需求归为三类每类的设计侧重不一样信息类型典型场景设计核心常见错误结构关系系统架构、组织架构层级清晰、分组明确层级混乱、模块大小不一流程流向业务流程、数据流转方向明确、路径不交叉箭头乱指、线条交叉时序交互接口调用、状态变化时间轴清晰、角色分明时间顺序颠倒、角色混淆拿结构关系图来说核心是分组和层级。我见过一个系统架构图把数据库、缓存、消息队列、网关全画在同一层用不同颜色区分。结果读者根本看不出谁依赖谁。正确的做法是用空间位置表达层级——上层是接入层中层是服务层下层是存储层同一层内的模块横向排列跨层的依赖用垂直方向的连线表示。这样即使不看文字光看布局就能猜出大概的依赖关系。流程流向图的核心是方向和路径。这里有个反直觉的经验减少交叉比减少节点更重要。有时候为了减少一条线的交叉宁可多绕一个弯、多画一个节点。因为交叉点会让读者产生这两条线是不是有关系的误判而多一个节点只是多一次阅读不会产生歧义。时序交互图的核心是时间轴和角色。时间轴必须是从上到下或者从左到右单向推进不能来回跳。角色要固定在同一列或同一行不能中途换位置。我见过有人画时序图同一个服务一会儿在左边一会儿在右边读者得反复对照才能跟上这就是典型的画图的人自己清楚看的人一头雾水。2.3 为什么少即是多在图表设计里是铁律图表设计和UI设计有个很大的区别UI设计可以靠视觉吸引力留住用户图表设计不行。图表是工具性的读者来看图是为了快速获取信息不是为了欣赏。所以任何不承载信息的视觉元素都是噪音。什么叫不承载信息的视觉元素我列几个常见的装饰性图标一个模块旁边放个小图标但图标和模块功能无关渐变背景让图看起来高级但增加了视觉负担多余阴影每个节点都加投影结果图看起来脏兮兮的花哨字体用了手写体或艺术字可读性直线下降这些元素在单看时可能觉得挺好看但放在一张需要传递复杂信息的图里就是灾难。我的原则是如果一个视觉元素去掉之后不影响信息理解那就去掉它。这条原则帮我砍掉了大量无意义的装饰图反而更清晰了。3. 一套可复用的图表设计流程3.1 第一步先写文字大纲再考虑画图这是我最想强调的一点也是最多人跳过的一步。很多人一上来就打开绘图工具拖几个框、连几条线然后发现逻辑不对又删了重来。正确的做法是先用纯文字把图的结构写出来。比如你要画一个用户下单的流程图先写用户提交订单系统校验库存库存充足则锁定库存不足则返回失败锁定成功后调用支付支付成功则生成订单失败则释放库存写完之后你再看这个文字结构就能判断出哪些是主干、哪些是分支、哪些需要合并。文字大纲的好处是修改成本极低——改一行字比改一个图形快得多。等文字逻辑理顺了再翻译成图形基本就是一次成型。3.2 第二步确定图表的阅读方向和视觉重心文字大纲有了之后下一步是决定读者从哪看起、往哪看。这决定了图表的整体布局。常见的阅读方向有三种从左到右适合流程、时间线、数据流从上到下适合层级、架构、决策树从中心向外适合关系网络、依赖图选哪种取决于你的信息结构。但不管选哪种都要保证视觉重心明确。所谓视觉重心就是读者第一眼会落在哪里。通常来说起点、核心模块、或者最大的那个框会成为视觉重心。你要确保这个重心放的是最重要的信息而不是最边缘的模块。我有个小技巧画完之后把图缩小到50%眯着眼睛看第一眼看到的就是视觉重心。如果那个位置放的不是核心信息就得调整布局。3.3 第三步用分组和留白代替连线新手画图最容易犯的错是用大量连线来表达关系。两个模块有关系就连一条线结果线多得像个蜘蛛网。其实很多关系可以用分组和留白来表达。比如三个模块都属于数据层你不需要给它们两两连线只需要把它们放在同一个虚线框里或者用相同的背景色读者自然就知道它们是一组的。再比如两个模块之间没有直接关系你只需要在它们之间留出足够的空白读者就不会误以为它们有关联。连线的数量应该和关系的复杂度成正比而不是和模块的数量成正比。一个只有5个模块但关系复杂的图可能需要8条线一个有20个模块但关系简单的图可能只需要3条线。3.4 第四步统一视觉语言建立图例规范当图里的元素超过10个就必须考虑视觉语言的统一性。什么叫视觉语言就是颜色、形状、线条样式、字体大小这些视觉元素的语法。我建议在画图之前先定一套简单的规范颜色最多用3-4种主色分别代表不同类别形状矩形代表服务圆角矩形代表外部系统菱形代表判断线条实线代表同步调用虚线代表异步消息字体标题用14px加粗正文用12px常规这套规范一旦定下来整张图就统一了。读者看第一个元素时学会了矩形是服务后面看到矩形就不用再猜。这就是视觉语言的价值——降低读者的学习成本。3.5 第五步找人试读收集看不懂的反馈图设计完了别急着交付。找一两个不了解这个项目的同事让他们看图然后问他们这张图讲了什么。如果他们说的和你想表达的一致说明图合格了如果他们卡在某个地方那个地方就是需要优化的点。这个步骤听起来简单但极其有效。因为画图的人有知识诅咒——你知道的太多所以觉得图很清楚。只有完全不了解背景的人才能发现真正的理解障碍。4. 工具选型不同场景用什么画图工具4.1 代码驱动型工具适合开发者版本可控如果你是个开发者我强烈建议优先考虑代码驱动型的绘图工具。什么叫代码驱动就是用文本描述图的结构工具自动渲染成图。这类工具的代表是Mermaid、PlantUML、Graphviz。它们的优势很明显版本可控图的内容是文本可以放进Git管理每次修改都有记录修改成本低改一行代码比拖拽图形快得多风格统一同一套主题渲染出来的图风格天然一致易于嵌入可以直接写在Markdown文档里和文档一起维护Mermaid 适合画流程图、时序图、状态图、甘特图语法简单学习成本低。PlantUML 功能更强支持更多图类型但语法稍复杂。Graphviz 适合画复杂的依赖关系图自动布局能力很强但样式控制不如前两者灵活。我个人的选择是日常流程图和时序图用 Mermaid复杂的架构依赖图用 Graphviz需要精细控制的图用下面要说的拖拽型工具。4.2 拖拽型工具适合精细控制但要注意版本管理拖拽型工具的代表是draw.io现在叫 diagrams.net、Excalidraw、Figma。这类工具的优势是所见即所得可以精细控制每个元素的位置、大小、颜色。draw.io 是我用得最多的免费、开源、支持本地保存、有丰富的图形库。它的一个隐藏优势是支持图层功能可以把不同层级的信息放在不同图层需要时显示或隐藏。这在画复杂架构图时特别有用。Excalidraw 的特点是手绘风格适合画草图、做讨论。它的视觉风格不那么正式反而降低了读者的心理门槛——大家会觉得这是个草图不用太较真讨论起来更放松。Figma 严格来说不是专门的绘图工具但它的矢量编辑能力和组件系统让它非常适合做设计系统级别的图表。如果你需要画一套风格完全统一的图Figma 的组件功能可以帮你复用颜色、字体、形状。4.3 工具选型的决策表场景推荐工具理由技术文档里的流程图Mermaid文本驱动易维护复杂系统架构图draw.io精细控制图层管理讨论用的草图Excalidraw手绘风格降低门槛设计系统级图表Figma组件复用风格统一自动布局的依赖图Graphviz自动排版减少手工调整选工具的核心原则是让工具服务于信息而不是让信息迁就工具。如果你发现某个工具让你花大量时间在调样式而不是理逻辑那可能选错了。5. 配色与排版让图表专业感翻倍的细节5.1 配色不是选好看的颜色而是选有意义的颜色图表配色的第一原则是颜色要承载信息。如果两种颜色代表的是同一类东西那就不该用两种颜色。如果两种颜色代表不同类别那就要确保它们有足够的区分度。我常用的配色策略是主色辅助色中性色主色1-2种用于核心模块或关键路径辅助色2-3种用于次要模块或分类中性色灰色系用于背景、边框、辅助文字具体选色时我有个偷懒但有效的办法直接用成熟设计系统的色板比如 Material Design 或 Ant Design 的官方色板。这些色板经过大量验证对比度和协调性都有保障比你自己调要靠谱得多。还有一个细节注意色盲友好。大约8%的男性有红绿色盲如果你的图用红色和绿色区分正反状态这部分读者就抓瞎了。解决办法是不要只靠颜色区分同时用形状或纹理辅助。比如成功用绿色实线失败用红色虚线这样即使看不出颜色也能通过线条样式区分。5.2 排版的核心是对齐和间距图表的专业感80%来自对齐和间距。我见过太多图内容都对但就是看起来业余问题基本都出在这两点。对齐同一层级的元素边缘必须对齐。左对齐、居中对齐、右对齐都行但不能混用。我习惯用网格对齐在 draw.io 里打开网格每个元素都吸附到网格线上这样天然对齐。间距元素之间的间距要一致。同一组内的元素间距小不同组之间的间距大。这样读者能通过间距判断分组关系。我常用的比例是组内间距 20px组间间距 60px这样分组一目了然。还有一个容易被忽略的点文字和边框的间距。文字离边框太近会显得拥挤太远会显得松散。我一般留 8-12px 的内边距具体看字号。5.3 字体选择可读性永远第一图表里的字体我的建议是用系统默认的无衬线字体。中文用思源黑体或苹方英文用Helvetica或Inter。不要用衬线体不要用手写体不要用艺术字。字号方面标题比正文大2-4px正文不要小于12px。如果是投影展示正文至少16px。我见过有人为了塞下更多内容把字号调到8px结果投影出来根本看不清这就本末倒置了。还有一个细节中英文混排时注意基线对齐。中文字符和英文字符的基线不一样混在一起容易显得高低不平。解决办法是统一用同一套字体的中英文版本或者手动调整行高。6. 我踩过的坑和总结出的经验6.1 坑一图太大信息太密我早期画架构图总想把所有细节都塞进去结果图大得需要放大到200%才能看清读者看两眼就放弃了。后来我学乖了一张图只讲一件事。如果信息太多就拆成多张图用总览图细节图的方式组织。总览图只画核心模块和主要依赖细节图再展开每个模块的内部结构。这样读者可以先看总览建立全局认知再按需深入细节。这个策略在技术文档里特别有效。6.2 坑二箭头方向不一致流程图的箭头方向必须统一。要么全是从左到右要么全是从上到下不能一会儿左一会儿右。我见过一张图主干流程是从左到右但某个分支突然从右到左读者得反应半天才能跟上。解决办法是先定主干方向所有分支都从主干分叉出去而不是逆流回去。如果确实需要回流用虚线或者不同颜色的线标注并在图例里说明。6.3 坑三图例缺失或不清当图里用了多种颜色、形状、线条样式时必须有图例。图例要放在图的角落不要放在中间干扰阅读。图例的内容要简洁一个色块配一行说明就够了。我见过有人把图例画得比图本身还复杂这就本末倒置了。图例是字典不是正文它的作用是快速查阅不是详细解释。6.4 坑四忽略图和文的配合图表很少单独存在通常和文字配合。这时候要注意图里已经说清楚的文字里不要重复文字里重点强调的图里要能对应上。我习惯在文字里用如图X所示来引用图然后在图里用编号或标签标注关键模块。这样读者可以在文字和图之间快速跳转不会迷失。6.5 一个让我受益匪浅的习惯建立自己的图表模板库画了几年图之后我发现自己反复在画类似的图系统架构图、时序图、状态机图、部署图。于是我开始把常用的图做成模板下次画同类图时直接套用。模板里预设好了颜色、字体、间距、图例位置我只需要改内容。这个习惯帮我节省了大量时间也保证了不同文档里的图风格统一。模板库不需要多复杂用 draw.io 的另存为模板功能或者用 Mermaid 的配置文件都能实现。7. 从能画到画得好的进阶思路7.1 学习优秀图表的结构感想提升图表设计能力最有效的方法是大量看优秀的图。不是看颜色好不好看而是看它的结构怎么组织的、信息怎么分层的、视线怎么引导的。我推荐几个方向技术白皮书里的架构图、知名开源项目的文档配图、经典教材里的原理图。看的时候问自己如果让我画同样的内容我会怎么布局它的布局好在哪里这样看几十张图你的结构感会明显提升。7.2 把图表当成产品来设计图表设计的高级阶段是把它当成一个产品来对待。这意味着你要考虑用户是谁给开发者看和给管理层看图的详细程度完全不同使用场景是放在文档里静态阅读还是投影讲解还是打印出来迭代维护这张图会不会经常改如果会就要考虑用代码驱动的方式当你开始从用户视角思考图表设计你的图就不再是信息的堆砌而是信息的服务。7.3 一个实用的练习方法重画旧图如果你手头有以前画的图挑一张你觉得还行但不够好的重新画一遍。画的时候刻意应用本文提到的原则先写文字大纲、确定阅读方向、用分组代替连线、统一视觉语言。画完之后对比新旧两版你会明显看到进步。这个方法我用了很多次每次都能发现新的改进点。图表设计是个手艺活光看理论不够必须动手练。最后分享一个我个人的体会图表设计的本质是替读者做减法。你把复杂的信息消化一遍提炼出核心结构再用最简洁的视觉语言表达出来。读者看到的是一张清晰的图但背后是你做的大量取舍工作。这个取舍能力才是图表设计的真正门槛。工具会变风格会变但替读者做减法这个核心不会变。