- 作者：面汤放盐 || uzong
- 时间：2025-08-28
- 转载请备注声明
引言：为何技术图会成为技术名片
一张技术图，可以很好作为一个人的技术名片，画好一张技术图，也并非容易； 在系统设计、技术分析、转正、晋升等关键场合，图都显得非常重要。掌握绘制一张清晰、准确且信息丰富的技术图是一个技术人员技术进阶必备的技能。
技术图首先要求设计师对系统的业务目标和技术需求有深刻的理解。不然会导致只见树木不见森林。当然这不仅涉及到对技术细节的掌握，还需要对业务流程、用户需求以及市场环境进行全面分析。只有这样，才能确保技术图不仅仅是一个技术展示，而是能够准确传达系统的业务价值和技术优势
本文将系统性地探讨如何绘制卓越的技术图，从提升视觉表现的"表面功夫"到锤炼系统思维的"内功心法"，助您将无形思想转化为有形杰作。
1. 表面功夫：视觉表达的卓越法则
卓越的视觉表现是"邀请函"，它决定了他者是否愿意驻足欣赏你的设计
1.1 元素布局策略
画图与摄影一样，有布局有构图，让图片看起来更美观。
- 重心：一张图非常需要有重心，不能头重脚轻、不能左倾右重，让整体不和谐。
- 对齐：对齐非常重要，让整体更加和谐美观
- 留白：留白不是浪费，是呼吸感，能迫使你删减次要信息，突出核心逻辑
1.1.1. 布局不方正
右上角与左下角都是空白、空旷的。整个图就重心不稳。
在两个地方补齐红框，就会更加饱满，更立体。
非常强调整个图的重心，不然会非常的不协调。更多案例
反例 ：布局杂乱、元素拥挤、对齐混乱的图，会传递出设计者思维混乱的信号。
正例：遵循对齐和留白原则的图，即便简单，也显得清晰、专业。
1.1.2. 布局杂乱
- 缺少层次感
- 颗粒度不统一
- 缺少对齐
整体就比较杂乱
1.1.3. 整齐划一
- 左右对齐
- 上下对齐
- 保持相同颗粒度
- 保持尽可能的间隙
- 符号一致性：同一元素在不同图中保持相同表示
- 风格一致性：颜色、字体、线条风格等视觉元素保持一致
增强图的专业感和可读性
1.1.4. 分层
相关元素聚集，形成视觉上的层次感。 特别在一些架构图中，非常明确的展示分层，通过分层，逻辑更加清晰，层次更强
1.1.5. 视觉引流
按照阅读习惯（通常从左到右，从上到下）安排元素。 （下图就是典型的从左到右）
1.1.6. 信息密度平衡：避免过于稀疏或拥挤
1.2. 色彩使用指南
颜色传递信息与情绪，必须谨慎使用
- 恰当使用颜色作为背景
- 避免使用过多的颜色
- 背景色应谨慎选择，以减小与前景元素的颜色反差
1.2.1. 饱和度低和饱和度高的背景色选择
- 背景饱和度低：如果前面图块存在颜色，背景色一般选择饱和度低的颜色
- 背景饱和度高：
如果前景图为白色，背景色可以是高饱和度的颜色。案例如下：
避免前景和背景都是高饱和度的颜色。
1.2.2. 颜色过多
视觉疲劳：过多的颜色变化和强烈的对比会让观看者的眼睛感到不适，增加视觉疲劳
分散注意力：复杂的背景容易分散观众对主要内容（如文字、图标等）的注意力，影响信息传达的效
影响美观：过多且不协调的颜色会使设计显得杂乱无章，缺乏美感和专业性
下面图片达到了8种颜色。
简洁性：限制颜色数量，选择一种主色调加几种辅助色，保持设计简洁。
1.2.3. 主题域颜色接近(逻辑分组)
比如长方块鱼下面的三个块。（"核心模块" 与"核心功能"、"功能"、"功能"）是同一个主题域的，保证颜色接近。
用颜色区分不同类型的组件或模块，帮助快速识别和理解, 实现逻辑上的分组。
比如下面的三层架构：展现出、应用层、平台层，通过颜色进行逻辑上的划分
颜色反差太大会导致视觉难受和疲劳，不够清爽
1.2.4. 颜色搭配不协调
- 饱和度高
- 红色等，不和谐
1.2.5 文字与背景颜色对比度颜色
- 饱和度高的颜色使用白色文字，如下面模块比较推荐虚线框内的组合
当然也可选择其他组合。比如白色背景，就可以选择较多颜色的文字。如此一来，会更加有体感。
1.2.6. 相同颜色代码功能相似
- 比如开始和结束使用相同颜色
- 需要分支判断使用一种颜色
1.2.7. 综合性案例
下面是来自zhuanlan.zhihu.com/p/269201440 中一张技术图
- 颜色相同表示元素有相似性、层级一致性等。
- 保证每个大模块内部颜色的一致性，避免颜色过多，展现出来的杂乱
1.2.8. 颜色的必要性
颜色可以不是必须的，只要对齐美观，也一样不错。例如下面这个图：
1.2.9. 留白处理
当然适当留白也至关重要, 避免占满整个图
每张图至少 30% 空白，迫使删减。
1.3. 连接线的最佳实践
1.3.1. 合理选择直角折线而非曲线
还是下面这张图，通过直角折线，会更加板正立体。
在大多数工具中更易维护
1.3.2. 线条对齐
比如下面这个，对于线条的使用就非常的粗糙，导致不美观优雅。
来一个正向案例，线条对齐，优雅美观。保持
对齐有很多, 从视觉上会更加舒适美观
- 上下对齐
- 左右对齐
- 居中对齐
- 间隔一致性
- .......
- 使用一致的符号和术语：保持技术图中使用的图形符号和术语的一致性，可以减少误解，增强可读性，统一使用行业标准的图标和符号有助于提高图表的可读性和专业性。
- 持续迭代优化：初次绘制出的技术图很可能不是最理想的版本，通过不断的反馈和修改，才能逐步完善
- 简化而非简化主义：去除不必要的细节，但保留足够的信息以支持理解和决策。
1.3.3. 线条粗细
对于复杂的大图，会将线条的粗细进行设计，对于比较密集性的，可以考虑使用1号
如果有背景色，也可以选择不用线条
反例 ：线条随意弯曲，未与组件框对齐，显得粗糙、不严谨。
正例：线条横平竖直，精确对齐，图表显得清晰、精致。
2. 画好架构的内功心法
上面谈论的都是一些表面工具，如何画好技术图，不仅仅只有表面功夫，更多还需有内功心法。
2.1. 全局理解
画好架构，需要对系统有全局的理解，否则很难从顶层出发，画好架构。
2.2. 抽象思维
对事务的抽象，做好架构设计。抽象就是在特定的环境，特定的视角，特定的维度，对事物进行分析、提炼、精简、归纳、推演、概括等行为，从具体到抽象，探索事物的规律和本质。
在软件领域，关于抽象，提炼了以下几个核心要素：
规避细节，提炼共性, 推演归集。下图是一幅展示牛的抽象演进示意图：
架构也是对于现实事物的抽象，将物理世界抽象具体的各种符号。
- 抽象层次低：杂乱、复杂、信息过载
- 抽象层次高：过于简单，丰富度缺失
过度聚合（一个"支付服务"盒子内部可能藏着 200 万行代码）
- 展示足够的信息以实现其目的
- 隐藏不必要的细节以避免混乱
2.3. 模块+通信
通过图来展示各个模块组件的通信，如果模块之间没有内在联系，就会有堆砌嫌疑，让整体失去内在联系。
模块：用抽象的模块描述
通信：用一些方向箭头、线条描述
案例一：dubbo 微服务生态示例架构中提供技术图：
cn.dubbo.apache.org/zh-cn/overv...
2.4. 边界
边界在哪： 明确图的范围 和粒度一张图无法展示所有细节，必须谨慎选择隐藏在每个方块背后的细节层级
3. 技巧性
3.1. 采用模版
模仿是掌握一个技术较为高效的方法，在很多画图软件中，都提供了很多模版。举例如下：
| 下面是语雀提供的模版。（技术图） |
|---|
 |
| processon 提供的一些模版 www.processon.com/template/se... |
|---|
 |
3.2. 练习多看
- 站在岸上学不会游泳，多加练习才能不断精进
- 多学习优先的模版，很多画图工具都提供了很多模版，可以基于模版进行实战练习。
4. 常见陷阱
优秀的技术图不仅仅是系统结构的静态表示，它更是一种动态的沟通工具，能够在项目的不同阶段为不同的利益相关者提供有价值的信息和支持。
技术图将不再仅仅是一张图纸，而是成为推动项目成功的关键因素之一。
4.1. 陷阱一、堆砌
尤其是一些产品技术图，会出现堆砌的嫌疑，为了凑齐一个大图，将一些不相干的、或则层次不一的放在一块，内部逻辑缺失等。
- 随意堆砌的内容会，缺少逻辑性。
- 所有内容挤在一张图中，没有层次结构
为了显得"高大上"或"全面"，将不相关、不同层级的组件强行塞入一张图。暴露了设计者缺乏提炼和界定核心逻辑的能力
4.2. 陷阱二、抽象陷阱
- 混淆层次：在一张高层图中突然深入底层实现细节，破坏抽象一致性。
- 错误抽象：抽象出的模块或概念不符合业务或技术语义，误导读者。
- 主观抽象：抽象有其上下文和角度，需确保团队对抽象概念的理解一致
抽象粒度不当，或脱离上下文使用无效抽象，导致图纸要么过于空洞，要么过于冗杂
5. 综合案例
5.1. 案例一、Spring AI Alibaba Core Features
比如对于 Spring AI Alibaba 的文档中 core Feature 的介绍图
- 背景颜色浅
- 内存模块对齐，内存模块每层都统一
- 多层背景颜色同色系颜色
- 颜色不复杂
- 白色背景黑色字体； 绿色背景白色字体。有较高的对比度
5.2.Dubbo 整体架构图
下面是 Dubbo 官方提供的整体架构图
- 通过实现箭头和虚线箭头表达通信
- 左右颜色表示服务提供者和服务消费者，颜色分明
- 有分层
- 颜色不多
- 背景有渐变，饱和度不高
- 文字有对比
- 对齐
- 有图例
.......
还有很多案例，就不一一赘述，大家感兴趣可以模仿实践并总结。
6. 推荐工具
| 工具 | 地址 |
|---|---|
| Processon | www.processon.com/ |
| excalidraw | excalidraw.com/ |
| draw.io | draw.io ：开源，全平台，支持绘制各种图。（下载地址：github.com/jgraph/draw...IDEA插件：Diagrams.net integration） |
| 语雀/飞书文档/钉钉文档等 |
工具都是次要的，心中要有对逻辑的全局视角，这样才能将思想转化成图。我见过有人专门使用 PPT 画架构图的，也画的非常惊艳，所以工具都是次要，更多是那些的想法，以及对整个事物的理解。
结语：从匠艺到匠心
绘制技术图，远非简单的视觉排列，而是一项融合了技术深度、抽象思维和视觉设计的综合技艺。卓越的'表面功夫'决定了人们是否愿意看你的图，而深刻的'内功心法'决定了你的图是否值得被认真对待。
它本质上是在构建一个沟通思想的模型 。这个模型的价值，不在于它的绚丽多彩，而在于它能否在系统的整个生命周期中------从设计、开发到运维、演化------作为可靠的指南针和共同的语言.
因此，掌握这项技能，意味着你不再仅仅是一个实现者，更是一个思考者、沟通者和设计者。你画的不仅是图，更是你对系统的理解、对复杂性的掌控以及对协作的承诺。这是一条从关注工具技巧的'匠艺'，走向洞察本质、创造价值的'匠心'之路。
作者公众号：[面汤放盐] 欢迎关注