🔔 本文 6000+ 字深度原创，含 15+ 张可复制的架构图示例和五大场景实战案例。创作不易，如果对你有帮助，请点赞 👍 收藏 ⭐ 关注 🔥 三连支持，你的认可是我持续输出的最大动力！
写在前面
架构师 80% 的时间在沟通，而沟通的最高效形式就是画图。
但我见过太多让人头大的架构图：
- 一张图想表达所有信息，密密麻麻几十个框，看的人头晕
- 业务流程、技术组件、网络拓扑、数据流向全混在一张图里
- 评审时讲了 30 分钟，老板还是没理解你在干啥
- 同一个系统，运维画一张、开发画一张、产品画一张，三张图谁看谁迷糊
架构图画得好不好，决定了你的方案能不能被读懂、被认可、被落地。
本文从架构图的本质出发，拆解 5 大场景（业务架构 / 系统架构 / 部署架构 / 数据架构 / 时序流程）、各自的画法重点和避坑要点，附 15+ 张可直接复用的实战案例图。
一、为什么架构图总是画不好？
我观察到的常见问题：
| 反模式 | 典型症状 | 后果 |
|---|---|---|
| 一图多义 | 业务流程 + 部署拓扑 + 数据流挤在一张图 | 谁都看不懂 |
| 抽象层级混乱 | 一边是"用户"，另一边是"Redis 集群" | 阅读者大脑抽风 |
| 图脱离受众 | 给 CEO 看的图全是技术组件名词 | 老板一脸懵 |
| 没有图例和标注 | 实线虚线、方框圆框混用，没说明 | 自己都解释不清 |
| 过度细节 | 把每张表、每个字段都画上 | 抓不住重点 |
| 过度抽象 | 三个大方框：前端/后端/数据库 | 等于啥也没说 |
| 缺少边界 | 没标清楚"我们在做什么、不做什么" | 范围争议不断 |
根因只有一个：没想清楚"画给谁看"和"想表达什么"。
二、架构图的本质：是沟通工具，不是装饰品
牢记三句话：
- 架构图是沟通工具------目的是让特定受众理解特定内容，不是炫技
- 架构图服从受众------给谁看就用谁能理解的语言和抽象层级
- 架构图聚焦单一视角------一张图只回答一个问题
2.1 架构图的"4+1"视图模型
经典的 Kruchten 4+1 视图给出了基本框架：
#mermaid-svg-ywAmPGQ68Lw7I6XM{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-ywAmPGQ68Lw7I6XM .error-icon{fill:#552222;}#mermaid-svg-ywAmPGQ68Lw7I6XM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ywAmPGQ68Lw7I6XM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .marker.cross{stroke:#333333;}#mermaid-svg-ywAmPGQ68Lw7I6XM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ywAmPGQ68Lw7I6XM p{margin:0;}#mermaid-svg-ywAmPGQ68Lw7I6XM .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster-label text{fill:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster-label span{color:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster-label span p{background-color:transparent;}#mermaid-svg-ywAmPGQ68Lw7I6XM .label text,#mermaid-svg-ywAmPGQ68Lw7I6XM span{fill:#333;color:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .node rect,#mermaid-svg-ywAmPGQ68Lw7I6XM .node circle,#mermaid-svg-ywAmPGQ68Lw7I6XM .node ellipse,#mermaid-svg-ywAmPGQ68Lw7I6XM .node polygon,#mermaid-svg-ywAmPGQ68Lw7I6XM .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .rough-node .label text,#mermaid-svg-ywAmPGQ68Lw7I6XM .node .label text,#mermaid-svg-ywAmPGQ68Lw7I6XM .image-shape .label,#mermaid-svg-ywAmPGQ68Lw7I6XM .icon-shape .label{text-anchor:middle;}#mermaid-svg-ywAmPGQ68Lw7I6XM .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .rough-node .label,#mermaid-svg-ywAmPGQ68Lw7I6XM .node .label,#mermaid-svg-ywAmPGQ68Lw7I6XM .image-shape .label,#mermaid-svg-ywAmPGQ68Lw7I6XM .icon-shape .label{text-align:center;}#mermaid-svg-ywAmPGQ68Lw7I6XM .node.clickable{cursor:pointer;}#mermaid-svg-ywAmPGQ68Lw7I6XM .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .arrowheadPath{fill:#333333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-ywAmPGQ68Lw7I6XM .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-ywAmPGQ68Lw7I6XM .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-ywAmPGQ68Lw7I6XM .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster text{fill:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM .cluster span{color:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ywAmPGQ68Lw7I6XM .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-ywAmPGQ68Lw7I6XM rect.text{fill:none;stroke-width:0;}#mermaid-svg-ywAmPGQ68Lw7I6XM .icon-shape,#mermaid-svg-ywAmPGQ68Lw7I6XM .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-ywAmPGQ68Lw7I6XM .icon-shape p,#mermaid-svg-ywAmPGQ68Lw7I6XM .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-ywAmPGQ68Lw7I6XM .icon-shape .label rect,#mermaid-svg-ywAmPGQ68Lw7I6XM .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-ywAmPGQ68Lw7I6XM .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-ywAmPGQ68Lw7I6XM .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-ywAmPGQ68Lw7I6XM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 场景视图
用户故事 / 用例
逻辑视图
业务架构
进程视图
系统/部署架构
开发视图
模块/代码组织
物理视图
部署架构
落到日常工作中，我把它简化为五大场景：
| 场景 | 受众 | 核心问题 | 抽象层级 |
|---|---|---|---|
| 业务架构图 | 老板/产品/业务方 | 我们在为谁解决什么问题？ | 业务概念 |
| 系统架构图 | 架构师/开发 | 系统由哪些模块组成、如何协作？ | 应用/服务 |
| 部署架构图 | 运维/SRE | 物理上如何部署？挂了怎么办？ | 机器/容器 |
| 数据架构图 | 数据团队/DBA | 数据从哪来、到哪去、如何加工？ | 数据流/表 |
| 时序流程图 | 开发/测试 | 一次调用具体经历了什么？ | 接口/方法 |
下面逐个拆解。
三、业务架构图------画给老板看的全景图
3.1 适用场景
- 立项汇报（让老板/投资人理解你在做什么）
- 业务全景介绍（新人入职、对外宣讲）
- 业务边界划分（决定团队职责切分）
3.2 核心要素
WHO（角色）→ WHAT（业务能力）→ HOW（关键流程）忌讳：出现技术名词（Redis、Kafka、K8s）。一旦出现，说明你画错图了。
3.3 案例：iPaaS 平台业务架构图
这张图回答了：谁在用？能做什么？解决什么业务问题？技术细节一字未提。
3.4 业务架构图避坑
| 坑 | 解法 |
|---|---|
| 把功能列表当业务架构 | 业务架构强调"价值流"，不是 Feature 清单 |
| 角色和能力混在一起 | 用 subgraph / 泳道明确分离 |
| 加入技术组件 | 严格剔除------出现"数据库""缓存"就是错的 |
| 图过于宏大 | 一张图覆盖一个业务域，不要全公司一张图 |
四、系统架构图------画给架构师和开发看的"骨骼"
4.1 适用场景
- 技术评审、方案设计
- 新人理解系统组成
- 重构决策依据
4.2 核心要素
模块/服务 + 它们之间的依赖关系 + 关键中间件推荐使用 C4 模型的 Container 层级（容器图），刚好适合大多数微服务场景。
4.3 案例：iPaaS 流程引擎系统架构
#mermaid-svg-dIWGgWtecqVGklYJ{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-dIWGgWtecqVGklYJ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-dIWGgWtecqVGklYJ .error-icon{fill:#552222;}#mermaid-svg-dIWGgWtecqVGklYJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dIWGgWtecqVGklYJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dIWGgWtecqVGklYJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dIWGgWtecqVGklYJ .marker.cross{stroke:#333333;}#mermaid-svg-dIWGgWtecqVGklYJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dIWGgWtecqVGklYJ p{margin:0;}#mermaid-svg-dIWGgWtecqVGklYJ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-dIWGgWtecqVGklYJ .cluster-label text{fill:#333;}#mermaid-svg-dIWGgWtecqVGklYJ .cluster-label span{color:#333;}#mermaid-svg-dIWGgWtecqVGklYJ .cluster-label span p{background-color:transparent;}#mermaid-svg-dIWGgWtecqVGklYJ .label text,#mermaid-svg-dIWGgWtecqVGklYJ span{fill:#333;color:#333;}#mermaid-svg-dIWGgWtecqVGklYJ .node rect,#mermaid-svg-dIWGgWtecqVGklYJ .node circle,#mermaid-svg-dIWGgWtecqVGklYJ .node ellipse,#mermaid-svg-dIWGgWtecqVGklYJ .node polygon,#mermaid-svg-dIWGgWtecqVGklYJ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dIWGgWtecqVGklYJ .rough-node .label text,#mermaid-svg-dIWGgWtecqVGklYJ .node .label text,#mermaid-svg-dIWGgWtecqVGklYJ .image-shape .label,#mermaid-svg-dIWGgWtecqVGklYJ .icon-shape .label{text-anchor:middle;}#mermaid-svg-dIWGgWtecqVGklYJ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-dIWGgWtecqVGklYJ .rough-node .label,#mermaid-svg-dIWGgWtecqVGklYJ .node .label,#mermaid-svg-dIWGgWtecqVGklYJ .image-shape .label,#mermaid-svg-dIWGgWtecqVGklYJ .icon-shape .label{text-align:center;}#mermaid-svg-dIWGgWtecqVGklYJ .node.clickable{cursor:pointer;}#mermaid-svg-dIWGgWtecqVGklYJ .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-dIWGgWtecqVGklYJ .arrowheadPath{fill:#333333;}#mermaid-svg-dIWGgWtecqVGklYJ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dIWGgWtecqVGklYJ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dIWGgWtecqVGklYJ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dIWGgWtecqVGklYJ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-dIWGgWtecqVGklYJ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dIWGgWtecqVGklYJ .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-dIWGgWtecqVGklYJ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dIWGgWtecqVGklYJ .cluster text{fill:#333;}#mermaid-svg-dIWGgWtecqVGklYJ .cluster span{color:#333;}#mermaid-svg-dIWGgWtecqVGklYJ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dIWGgWtecqVGklYJ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-dIWGgWtecqVGklYJ rect.text{fill:none;stroke-width:0;}#mermaid-svg-dIWGgWtecqVGklYJ .icon-shape,#mermaid-svg-dIWGgWtecqVGklYJ .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dIWGgWtecqVGklYJ .icon-shape p,#mermaid-svg-dIWGgWtecqVGklYJ .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-dIWGgWtecqVGklYJ .icon-shape .label rect,#mermaid-svg-dIWGgWtecqVGklYJ .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dIWGgWtecqVGklYJ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-dIWGgWtecqVGklYJ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-dIWGgWtecqVGklYJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 外部系统
中间件层
核心服务层
接入层
Web控制台
OpenAPI 网关
Webhook 接收器
流程设计服务
Spring Boot
流程执行引擎
Spring Boot
连接器服务
动态类加载
事件中心
触发器调度
管理后台服务
RocketMQ
异步任务队列
Redis
缓存与分布式锁
MySQL
元数据存储
Elasticsearch
执行日志检索
第三方应用
钉钉/企微/SAP/...
关键画法技巧：
- 分层组织：接入层 → 服务层 → 中间件层 → 外部系统，从上到下数据流向清晰
- 同类同形：所有服务用方框、所有存储用圆柱、所有外部用云形
- 箭头有方向：表示调用方向；双向需要的话用两根单向箭头
- 关键标注：服务旁标技术栈，存储旁标用途
4.4 系统架构图避坑
| 坑 | 解法 |
|---|---|
| 画成了"组件全家桶"，啥都堆进去 | 一张图最多 15 个节点，超了就拆图 |
| 同一抽象层级混入子模块 | 用图层钻取------总览图 → 模块详图 |
| 没标技术选型 | 关键服务标注"Spring Boot / Go / Rust" |
| 中间件画了一堆但没说用途 | 每个中间件后面加一行"为什么用它" |
五、部署架构图------画给运维看的"现实地理图"
5.1 适用场景
- 上线方案、容量规划
- 故障演练、容灾设计
- 安全评审（网络边界、暴露面）
5.2 核心要素
机房 / 可用区 / VPC / 子网 / 节点 / Pod / 流量入口关键差异 ：必须体现物理或逻辑的部署边界，这是和系统架构图最大的区别。
5.3 案例：iPaaS 平台 K8s 双可用区高可用部署
#mermaid-svg-MEZK18f9cPV80X2v{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-MEZK18f9cPV80X2v .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-MEZK18f9cPV80X2v .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-MEZK18f9cPV80X2v .error-icon{fill:#552222;}#mermaid-svg-MEZK18f9cPV80X2v .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MEZK18f9cPV80X2v .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-MEZK18f9cPV80X2v .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MEZK18f9cPV80X2v .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MEZK18f9cPV80X2v .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-MEZK18f9cPV80X2v .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MEZK18f9cPV80X2v .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MEZK18f9cPV80X2v .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MEZK18f9cPV80X2v .marker.cross{stroke:#333333;}#mermaid-svg-MEZK18f9cPV80X2v svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MEZK18f9cPV80X2v p{margin:0;}#mermaid-svg-MEZK18f9cPV80X2v .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MEZK18f9cPV80X2v .cluster-label text{fill:#333;}#mermaid-svg-MEZK18f9cPV80X2v .cluster-label span{color:#333;}#mermaid-svg-MEZK18f9cPV80X2v .cluster-label span p{background-color:transparent;}#mermaid-svg-MEZK18f9cPV80X2v .label text,#mermaid-svg-MEZK18f9cPV80X2v span{fill:#333;color:#333;}#mermaid-svg-MEZK18f9cPV80X2v .node rect,#mermaid-svg-MEZK18f9cPV80X2v .node circle,#mermaid-svg-MEZK18f9cPV80X2v .node ellipse,#mermaid-svg-MEZK18f9cPV80X2v .node polygon,#mermaid-svg-MEZK18f9cPV80X2v .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MEZK18f9cPV80X2v .rough-node .label text,#mermaid-svg-MEZK18f9cPV80X2v .node .label text,#mermaid-svg-MEZK18f9cPV80X2v .image-shape .label,#mermaid-svg-MEZK18f9cPV80X2v .icon-shape .label{text-anchor:middle;}#mermaid-svg-MEZK18f9cPV80X2v .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-MEZK18f9cPV80X2v .rough-node .label,#mermaid-svg-MEZK18f9cPV80X2v .node .label,#mermaid-svg-MEZK18f9cPV80X2v .image-shape .label,#mermaid-svg-MEZK18f9cPV80X2v .icon-shape .label{text-align:center;}#mermaid-svg-MEZK18f9cPV80X2v .node.clickable{cursor:pointer;}#mermaid-svg-MEZK18f9cPV80X2v .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-MEZK18f9cPV80X2v .arrowheadPath{fill:#333333;}#mermaid-svg-MEZK18f9cPV80X2v .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MEZK18f9cPV80X2v .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MEZK18f9cPV80X2v .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-MEZK18f9cPV80X2v .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-MEZK18f9cPV80X2v .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-MEZK18f9cPV80X2v .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-MEZK18f9cPV80X2v .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MEZK18f9cPV80X2v .cluster text{fill:#333;}#mermaid-svg-MEZK18f9cPV80X2v .cluster span{color:#333;}#mermaid-svg-MEZK18f9cPV80X2v div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MEZK18f9cPV80X2v .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-MEZK18f9cPV80X2v rect.text{fill:none;stroke-width:0;}#mermaid-svg-MEZK18f9cPV80X2v .icon-shape,#mermaid-svg-MEZK18f9cPV80X2v .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-MEZK18f9cPV80X2v .icon-shape p,#mermaid-svg-MEZK18f9cPV80X2v .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-MEZK18f9cPV80X2v .icon-shape .label rect,#mermaid-svg-MEZK18f9cPV80X2v .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-MEZK18f9cPV80X2v .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-MEZK18f9cPV80X2v .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-MEZK18f9cPV80X2v :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 数据库与中间件
K8s集群
可用区B
可用区A
主从同步
公网用户
WAF
云盾
公网SLB
四层负载
Ingress节点
2台 4C8G
应用节点池
4台 8C32G
数据节点池
2台 16C64G
Ingress节点
2台 4C8G
应用节点池
4台 8C32G
数据节点池
2台 16C64G
MySQL主
AZ-A
MySQL从
AZ-B
Redis Cluster
3主3从跨AZ
RocketMQ
双Broker
关键画法技巧：
- 从外到内：公网入口 → 安全层 → 负载层 → 应用层 → 数据层
- AZ 边界要清晰：同 AZ 内通信和跨 AZ 通信成本不一样
- 标明规格：节点机型、数量、CPU/内存------容量评估的依据
- 主从/集群拓扑：MySQL 主从、Redis 集群、MQ 双 Broker，故障演练必看
- 流量方向：实线=主调用、虚线=同步/复制
5.4 部署架构图避坑
| 坑 | 解法 |
|---|---|
| 没体现高可用拓扑 | 至少画出双 AZ 或多副本 |
| 漏掉关键流量入口 | WAF / CDN / SLB / Ingress 都要画清楚 |
| 没标资源规格 | 节点机型 + 数量 + 配置必须有 |
| 把开发/测试/生产混在一张图 | 不同环境分别画 |
| 不区分外部依赖 | 三方服务、内部服务、自建中间件用不同形状 |
六、数据架构图------画给数据团队看的"血管图"
6.1 适用场景
- 数仓建模、ETL 链路设计
- 数据治理、数据资产盘点
- 实时数据流向梳理（CDC、Kafka、Stream Processing）
6.2 核心要素
数据源 → 接入方式 → 加工层级 → 存储介质 → 消费场景数据架构图最强调方向------数据是有源有流的。
6.3 案例：iPaaS + Doris + DataEase 数据集成链路
#mermaid-svg-olTu0HZa7ZbuWdQt{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-olTu0HZa7ZbuWdQt .error-icon{fill:#552222;}#mermaid-svg-olTu0HZa7ZbuWdQt .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-olTu0HZa7ZbuWdQt .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-olTu0HZa7ZbuWdQt .marker{fill:#333333;stroke:#333333;}#mermaid-svg-olTu0HZa7ZbuWdQt .marker.cross{stroke:#333333;}#mermaid-svg-olTu0HZa7ZbuWdQt svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-olTu0HZa7ZbuWdQt p{margin:0;}#mermaid-svg-olTu0HZa7ZbuWdQt .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster-label text{fill:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster-label span{color:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster-label span p{background-color:transparent;}#mermaid-svg-olTu0HZa7ZbuWdQt .label text,#mermaid-svg-olTu0HZa7ZbuWdQt span{fill:#333;color:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt .node rect,#mermaid-svg-olTu0HZa7ZbuWdQt .node circle,#mermaid-svg-olTu0HZa7ZbuWdQt .node ellipse,#mermaid-svg-olTu0HZa7ZbuWdQt .node polygon,#mermaid-svg-olTu0HZa7ZbuWdQt .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-olTu0HZa7ZbuWdQt .rough-node .label text,#mermaid-svg-olTu0HZa7ZbuWdQt .node .label text,#mermaid-svg-olTu0HZa7ZbuWdQt .image-shape .label,#mermaid-svg-olTu0HZa7ZbuWdQt .icon-shape .label{text-anchor:middle;}#mermaid-svg-olTu0HZa7ZbuWdQt .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-olTu0HZa7ZbuWdQt .rough-node .label,#mermaid-svg-olTu0HZa7ZbuWdQt .node .label,#mermaid-svg-olTu0HZa7ZbuWdQt .image-shape .label,#mermaid-svg-olTu0HZa7ZbuWdQt .icon-shape .label{text-align:center;}#mermaid-svg-olTu0HZa7ZbuWdQt .node.clickable{cursor:pointer;}#mermaid-svg-olTu0HZa7ZbuWdQt .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-olTu0HZa7ZbuWdQt .arrowheadPath{fill:#333333;}#mermaid-svg-olTu0HZa7ZbuWdQt .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-olTu0HZa7ZbuWdQt .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-olTu0HZa7ZbuWdQt .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-olTu0HZa7ZbuWdQt .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-olTu0HZa7ZbuWdQt .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-olTu0HZa7ZbuWdQt .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster text{fill:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt .cluster span{color:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-olTu0HZa7ZbuWdQt .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-olTu0HZa7ZbuWdQt rect.text{fill:none;stroke-width:0;}#mermaid-svg-olTu0HZa7ZbuWdQt .icon-shape,#mermaid-svg-olTu0HZa7ZbuWdQt .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-olTu0HZa7ZbuWdQt .icon-shape p,#mermaid-svg-olTu0HZa7ZbuWdQt .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-olTu0HZa7ZbuWdQt .icon-shape .label rect,#mermaid-svg-olTu0HZa7ZbuWdQt .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-olTu0HZa7ZbuWdQt .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-olTu0HZa7ZbuWdQt .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-olTu0HZa7ZbuWdQt :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 消费层
存储层 Apache Doris
接入层 iPaaS
数据源层
Stream Load
ERP系统
CRM系统
SaaS应用
钉钉/企微
业务数据库
600+连接器
流程ETL
清洗/转换/拆分
ODS
原始明细
DWD
明细事实
DWS
主题汇总
ADS
应用数据集市
DataEase BI看板
OpenAPI 数据服务
实时告警
关键画法技巧：
- 横向布局：数据流通常用 LR（left-right）布局，方向明显
- 分层清晰：数据源 / 接入 / 存储 / 消费，四层最常见
- 标注协议/方式：箭头上加 "Stream Load" / "CDC" / "Kafka" / "API"
- 数仓分层用业界标准：ODS / DWD / DWS / ADS，不要自创概念
6.4 数据架构图避坑
| 坑 | 解法 |
|---|---|
| 把表结构画进来 | 表结构是 ER 图的事，数据架构图只画数据流向 |
| 没区分实时/离线 | 用不同箭头颜色或标注 T+0 / T+1 |
| 缺失血缘标注 | 每条线说明"什么数据 + 怎么传" |
| 上下层调用方向画反 | 数据从源头流向消费方，箭头别弄反 |
七、时序流程图------画给开发和测试看的"剧本"
7.1 适用场景
- 复杂调用链路梳理
- Bug 定位、问题复盘
- 接口对接文档
7.2 核心要素
参与者（系统/服务/角色）+ 消息（接口调用）+ 时间顺序时序图的精髓：时间从上到下，参与者从左到右。
7.3 案例：iPaaS 流程触发到执行完成的完整时序
执行日志ES 第三方应用 连接器服务 流程引擎 RocketMQ 触发器服务 用户/外部系统 执行日志ES 第三方应用 连接器服务 流程引擎 RocketMQ 触发器服务 用户/外部系统 #mermaid-svg-UIHFLlg2dwEh07V7{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-UIHFLlg2dwEh07V7 .error-icon{fill:#552222;}#mermaid-svg-UIHFLlg2dwEh07V7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UIHFLlg2dwEh07V7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UIHFLlg2dwEh07V7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UIHFLlg2dwEh07V7 .marker.cross{stroke:#333333;}#mermaid-svg-UIHFLlg2dwEh07V7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UIHFLlg2dwEh07V7 p{margin:0;}#mermaid-svg-UIHFLlg2dwEh07V7 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UIHFLlg2dwEh07V7 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-UIHFLlg2dwEh07V7 .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-UIHFLlg2dwEh07V7 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-UIHFLlg2dwEh07V7 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-UIHFLlg2dwEh07V7 .sequenceNumber{fill:white;}#mermaid-svg-UIHFLlg2dwEh07V7 #sequencenumber{fill:#333;}#mermaid-svg-UIHFLlg2dwEh07V7 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-UIHFLlg2dwEh07V7 .messageText{fill:#333;stroke:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UIHFLlg2dwEh07V7 .labelText,#mermaid-svg-UIHFLlg2dwEh07V7 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .loopText,#mermaid-svg-UIHFLlg2dwEh07V7 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-UIHFLlg2dwEh07V7 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-UIHFLlg2dwEh07V7 .noteText,#mermaid-svg-UIHFLlg2dwEh07V7 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-UIHFLlg2dwEh07V7 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UIHFLlg2dwEh07V7 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UIHFLlg2dwEh07V7 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-UIHFLlg2dwEh07V7 .actorPopupMenu{position:absolute;}#mermaid-svg-UIHFLlg2dwEh07V7 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-UIHFLlg2dwEh07V7 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-UIHFLlg2dwEh07V7 .actor-man circle,#mermaid-svg-UIHFLlg2dwEh07V7 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-UIHFLlg2dwEh07V7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} loop节点循环执行 Webhook触发(payload)校验签名+幂等投递触发消息ACK拉取消息加载流程定义创建执行实例执行节点(请求参数)调用第三方API返回响应节点结果写入节点日志更新执行状态=成功ACK消费
关键画法技巧：
- 参与者命名要具体：不要写"系统A"，写"流程引擎"或具体服务名
- 消息文字要含信息量：写"Webhook触发(payload)"，不要只写"调用"
- 同步/异步要区分：实线=同步、虚线=异步/返回
- 关键步骤可加 note ：复杂逻辑用
Note over加注释 - 循环和分支用 loop / alt：体现控制流
7.4 时序图避坑
| 坑 | 解法 |
|---|---|
| 参与者太多（>8 个） | 拆图：核心链路 + 子流程图 |
| 把内部方法调用都画上 | 时序图是跨服务的，内部调用用代码注释更合适 |
| 异常分支没画 | 用 alt/else 画清楚成功 vs 失败路径 |
| 没标关键耗时 | 性能优化场景，关键节点加耗时标注 |
八、画图工具横向对比
| 工具 | 适合场景 | 优势 | 劣势 |
|---|---|---|---|
| Mermaid | 嵌入文档/Markdown/Wiki | 文本即图、版本可控、协作友好 | 复杂图美观度有限 |
| PlantUML | UML 类图、复杂时序 | UML 标准支持完整 | 学习曲线陡 |
| draw.io / diagrams.net | 部署架构、网络拓扑 | 图标丰富、可视化拖拽 | 多人协作弱、版本控制难 |
| Excalidraw | 头脑风暴、白板讨论 | 手绘风格亲切、零门槛 | 不适合正式文档 |
| OmniGraffle | Mac 用户的精美图 | 美观、专业感强 | 收费、协作弱 |
| Visio | 企业内传统场景 | 模板多、办公兼容 | 跨平台差、过时 |
我的工具组合推荐
| 用途 | 推荐工具 | 理由 |
|---|---|---|
| 技术博客/Wiki | Mermaid | Markdown 原生支持，diff 友好 |
| 评审 PPT | draw.io 导出 SVG | 美观+可编辑 |
| 头脑风暴 | Excalidraw | 快速、协作 |
| 正式架构文档 | C4-PlantUML | 标准+可维护 |
| 复杂交互演示 | Figma | 可加交互效果 |
核心原则：能用文本生成的图（Mermaid/PlantUML）就不用拖拽工具------版本可控、协作友好、不会画着画着布局乱了。
九、画图前必问的 5 个问题
每次画架构图前，强制问自己 5 个问题：
#mermaid-svg-8GL5r9cwlbDOEtx0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-8GL5r9cwlbDOEtx0 .error-icon{fill:#552222;}#mermaid-svg-8GL5r9cwlbDOEtx0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8GL5r9cwlbDOEtx0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .marker.cross{stroke:#333333;}#mermaid-svg-8GL5r9cwlbDOEtx0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8GL5r9cwlbDOEtx0 p{margin:0;}#mermaid-svg-8GL5r9cwlbDOEtx0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster-label text{fill:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster-label span{color:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster-label span p{background-color:transparent;}#mermaid-svg-8GL5r9cwlbDOEtx0 .label text,#mermaid-svg-8GL5r9cwlbDOEtx0 span{fill:#333;color:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .node rect,#mermaid-svg-8GL5r9cwlbDOEtx0 .node circle,#mermaid-svg-8GL5r9cwlbDOEtx0 .node ellipse,#mermaid-svg-8GL5r9cwlbDOEtx0 .node polygon,#mermaid-svg-8GL5r9cwlbDOEtx0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .rough-node .label text,#mermaid-svg-8GL5r9cwlbDOEtx0 .node .label text,#mermaid-svg-8GL5r9cwlbDOEtx0 .image-shape .label,#mermaid-svg-8GL5r9cwlbDOEtx0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-8GL5r9cwlbDOEtx0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .rough-node .label,#mermaid-svg-8GL5r9cwlbDOEtx0 .node .label,#mermaid-svg-8GL5r9cwlbDOEtx0 .image-shape .label,#mermaid-svg-8GL5r9cwlbDOEtx0 .icon-shape .label{text-align:center;}#mermaid-svg-8GL5r9cwlbDOEtx0 .node.clickable{cursor:pointer;}#mermaid-svg-8GL5r9cwlbDOEtx0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .arrowheadPath{fill:#333333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8GL5r9cwlbDOEtx0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-8GL5r9cwlbDOEtx0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8GL5r9cwlbDOEtx0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster text{fill:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 .cluster span{color:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8GL5r9cwlbDOEtx0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-8GL5r9cwlbDOEtx0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-8GL5r9cwlbDOEtx0 .icon-shape,#mermaid-svg-8GL5r9cwlbDOEtx0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8GL5r9cwlbDOEtx0 .icon-shape p,#mermaid-svg-8GL5r9cwlbDOEtx0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-8GL5r9cwlbDOEtx0 .icon-shape .label rect,#mermaid-svg-8GL5r9cwlbDOEtx0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8GL5r9cwlbDOEtx0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-8GL5r9cwlbDOEtx0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-8GL5r9cwlbDOEtx0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 1. 这张图给谁看？
受众决定抽象层级
2. 我想表达什么？
一张图回答一个问题
3. 选哪种视角？
业务/系统/部署/数据/时序
4. 边界在哪？
什么画进来，什么不画
5. 节点不超过15个？
超了就拆图
把这 5 个问题想清楚，至少能避免 70% 的烂图。
十、架构图评审 Checklist
提交评审前用这份清单自查：
受众与目的
- 明确这张图的目标受众（业务方 / 架构师 / 运维 / 开发）
- 一张图只回答一个核心问题
- 标题简洁说明"是什么图"（如"iPaaS 流程引擎系统架构图 v1.2"）
抽象与边界
- 同一张图内抽象层级一致（不会出现"用户"和"Redis"并列）
- 边界清晰（用 subgraph / 框选 / 颜色区分）
- 节点数量 ≤ 15 个，过多拆图
表达准确性
- 箭头方向正确（调用方 → 被调用方 / 数据源 → 数据去向）
- 同类元素用同一形状
- 关键技术选型有标注（Spring Boot / RocketMQ / MySQL）
- 关键规格有标注（节点数量、机型、副本数）
图例与可读性
- 实线 / 虚线 / 颜色含义有图例
- 缩写有完整说明（"MQ" 第一次出现写"RocketMQ MQ"）
- 字体大小适中，远看不吃力
- 整体布局对称美观（不要东一坨西一坨）
可维护性
- 优先用文本生成（Mermaid/PlantUML）
- 源文件入 Git 版本控制
- 标注版本号与最后更新日期
十一、七个高频反模式
反模式 1：万能架构图
一张图想画全公司业务 + 所有系统 + 全部部署细节。
修复：拆成业务架构、系统架构、部署架构三张图，分别给不同受众。
反模式 2：技术名词侵入业务图
业务架构图里出现"Redis"、"Kafka"、"Spring Cloud"。
修复：业务图严禁技术词；技术词只在系统架构图及更下层出现。
反模式 3：箭头乱舞
每个组件都和每个组件连线，密密麻麻像蜘蛛网。
修复 ：只画核心调用关系，间接的、偶尔的不画。
反模式 4：抽象层级穿透
一张图里同时有"流程引擎服务"和"FlowEngineImpl.execute() 方法"。
修复：保持同一抽象层。要么都画服务，要么都画类。
反模式 5：图例缺失
各种实线虚线、方框圆框、不同颜色，没有任何说明。
修复：右下角加图例区，明确每种符号的含义。
反模式 6：版本失控
PPT 里嵌入截图，原图找不到了；改一个组件要重画整张图。
修复：用 Mermaid/PlantUML 文本，源码入 Git，所见即所得。
反模式 7：纸上谈兵
画的图和实际部署完全不一致------文档归文档，现实归现实。
修复：架构图必须与代码、配置、部署清单对得上。建议每个 Sprint 校准一次。
十二、常见问题（FAQ）
Q：我应该先画图再写代码，还是先写代码再画图？
A：取决于复杂度。复杂方案 （影响多个服务、跨团队协作、新引入中间件）必须先画图，让大家在图上达成一致再开发。简单需求可以先实现，再补一张图作为文档归档。但任何对外评审、对接的方案都必须先有图。
Q：架构图要画到多细？
A：原则------画到下一层人能开始干活的颗粒度。给老板看：到业务能力级别即可；给架构师看：到服务级别；给开发看：到模块/接口级别；给运维看：到节点/Pod/规格级别。再细就该写代码或写部署清单了，不是图的事。
Q：用 Mermaid 还是 draw.io？
A：能用 Mermaid 就用 Mermaid------文本可 diff、可版本控制、可嵌入 Markdown，团队协作友好。draw.io 适合非常复杂的网络拓扑或需要精美呈现的对外汇报。两者结合：日常用 Mermaid，正式输出用 draw.io 导出 SVG。
Q：架构图画完了怎么维护？
A：三个习惯：① 源码入 Git（Mermaid 文本）；② 每个 Sprint 评审时校准一次；③ 关键架构变更（新增服务、引入中间件）必须同步更新图。架构图过期 = 误导后人 = 比没图还糟糕。
Q：架构图和 UML 是什么关系？
A：UML 是一套标准化建模语言 （类图/时序图/活动图等 14 种），属于工具集。架构图是一类目的导向的视图（表达架构）。两者交集在时序图、组件图、部署图。日常工作中不必拘泥于 UML 严谨性，重点是清晰传达。
Q：架构图能 AI 生成吗？
A：可以辅助。给 AI 喂业务描述，让它生成 Mermaid 文本，然后人工调整布局和节点关系。但思考过程不能 AI 化------画图前那 5 个问题（受众/目的/视角/边界/数量）必须自己想清楚，AI 帮不了你。
十三、小结
画好架构图，本质上是结构化思维 + 受众意识 + 工具熟练度三者的乘积。
三句话总结：
- 先想清楚画给谁看，再想画什么------受众错了，画再美也是废纸
- 一张图回答一个问题------业务/系统/部署/数据/时序，分别承载不同视角
- 能用文本生成就不用拖拽------Mermaid/PlantUML 是架构师最该掌握的两个工具
架构图的终极目标，是让一个完全不了解你系统的人，10 分钟内理解你做了什么、为什么这么做、它如何运转。能做到这一点，你的图就成功了。
标签：#架构设计 #架构图 #软件架构 #系统设计 #C4模型 #UML #Mermaid #PlantUML #部署架构 #数据架构 #业务架构 #时序图 #技术沟通 #研发效能