前言

在软件开发与架构设计中，一张清晰标准的架构图，是团队协作、技术方案汇报、项目交接的核心载体。但很多开发者画架构图时，往往陷入“随意堆砌组件、层级混乱、无统一标准”的误区，导致非技术人员看不懂、团队内部沟通成本高，甚至面试、述职时因架构图不规范大打折扣。

本文将全面梳理主流系统架构绘图规范，重点详解C4模型、4+1视图模型两大核心规范，同时深度讲解Mermaid、PlantUML两款文本绘图工具，搭配实战可直接复制的代码示例，帮你快速掌握标准化架构图绘制方法，彻底告别杂乱架构图！

一、主流系统架构绘图规范盘点

系统架构图并非随意绘制，而是有成熟的行业规范，不同规范适配不同项目规模与受众，核心规范分为轻量通用型、企业经典型、云原生专属型三大类，本文重点讲解互联网与企业开发中最常用、最实用的C4模型和4+1视图模型。

（一）C4模型：轻量易懂的程序员首选规范

C4模型由Simon Brown提出，核心是通过4个层级，从宏观到微观递进式描述系统架构，C代表Context（上下文），4代表4个视图层级，特点是简单易学、无复杂术语，技术人员和非技术人员都能快速理解，是当下互联网公司、中小项目最常用的轻量规范，也是新手入门架构绘图的最优选择。

C4四层核心规范

1. Level 1：系统上下文图（Context）

   • 粒度：最宏观层级，展示整个系统、终端用户与外部依赖系统

   • 受众：产品、运营、管理层等非技术人员

   • 核心：明确系统边界，不展示内部细节，让外行也能一眼看懂系统定位

2. Level 2：容器图（Container）

   • 粒度：拆解系统为可独立部署/运行的单元

   • 受众：全技术团队、架构师

   • 核心：展示前端、后端服务、数据库、缓存、消息队列等容器，以及通信协议、技术栈，是工作中最常用的架构图层级

3. Level 3：组件图（Component）

   • 粒度：拆解单个容器/服务为内部功能模块

   • 受众：开发人员、架构师

   • 核心：展示服务内部的Controller、Service、DAO等组件依赖，细化业务逻辑分工

4. Level 4：代码图（Code）

   • 粒度：最细层级，展示类、接口、方法结构

   • 受众：开发人员

   • 备注：实际工作中极少绘制，直接查看代码即可，无需额外画图

C4模型核心原则

• 一张图只展示一个层级，禁止多层混合，避免信息过载

• 统一图例：矩形=系统/服务/组件，箭头=调用/数据流

• 标注关键技术栈与通信协议，简洁不冗余，拒绝花里胡哨的配色

（二）4+1视图模型：企业级经典架构规范

4+1视图模型由Philippe Kruchten提出，是大型企业项目、传统软件工程、金融/政企类项目的经典标准，通过5个视图全方位刻画系统架构，覆盖逻辑、开发、运行、部署全维度，适配复杂分布式系统、大型微服务架构。

4+1视图核心构成

1. 逻辑视图：对应C4组件/代码层，展示系统功能模块、类结构、业务逻辑，聚焦“系统能做什么”

2. 开发视图：聚焦代码分层、模块分工、包结构，适配开发团队协作，聚焦“代码怎么组织”

3. 进程视图：展示系统运行时状态、进程/线程通信、并发逻辑，聚焦“系统怎么运行”

4. 物理视图：对应C4容器/部署层，展示服务器、网络、部署拓扑，聚焦“系统部署在哪”

5. 场景视图（+1）：通过核心业务用例，串联前4个视图，验证架构合理性，聚焦“核心流程怎么走”

C4与4+1的关联

两者并非对立关系，而是互补适配：C4轻量聚焦视图层级，上手快、易传播；4+1全面覆盖架构维度，更严谨、更专业。实际工作中可结合使用——用C4画层级架构，快速出图；用4+1梳理架构维度，完善设计，兼顾简洁性与全面性。

（三）其他补充架构规范

1. TOGAF/ArchiMate：企业级重型规范，适配银行、央企等大型集团，分业务、数据、应用、技术四大架构域，适合超大型企业架构设计

2. UML统一建模语言：老牌建模标准，包含类图、时序图、部署图等10余种图表，偏传统软件工程，云原生场景使用较少

3. 云厂商架构规范：AWS、阿里云、腾讯云官方图标规范，适配云原生、微服务部署架构图，适合上云方案、云平台架构设计

二、系统架构绘图神器：Mermaid与PlantUML详解

绘制标准化架构图，工具选择至关重要。文本绘图工具凭借“代码即图表、易修改、可Git版本控制、无缝嵌入Markdown/博客”的优势，彻底告别传统拖拽工具的繁琐，成为开发者首选，其中Mermaid和PlantUML是最主流的两款，下面结合架构规范做实战讲解，代码直接复制就能用！

（一）Mermaid：轻量极简，新手入门首选

工具简介

Mermaid是基于JavaScript的开源文本绘图工具，语法类Markdown，零门槛上手，支持实时渲染，无缝集成VS Code、Typora、CSDN、GitHub、语雀等平台，完美适配C4模型架构图绘制，是个人博客、技术文档、快速绘图的天花板工具。

核心优势

• 语法极简，无需记忆复杂代码，看一遍就能上手

• 原生支持Markdown，博客、文档直接嵌入，无需导出图片

• 在线编辑器实时预览，一键导出SVG/PNG/PDF高清格式

• 轻量无依赖，无需安装客户端，打开网页就能用

C4模型Mermaid实战示例

1. C4 Level1 系统上下文图

2. C4 Level2 容器图（工作最常用）

（二）PlantUML：专业全面，企业级架构必备

工具简介

PlantUML是老牌开源文本绘图工具，功能远超Mermaid，原生支持C4、4+1、UML全规范，语法更专业，布局更精准，适配复杂企业级架构图、微服务架构、数据库ER图、时序图绘制，是架构师、资深开发必备的专业工具。

核心优势

• 支持C4、4+1、UML全规范，绘图类型全覆盖，复杂架构无压力

• 布局更稳定，组件依赖、层级关系展示更清晰

• 支持批量导出，可集成CI/CD流程，适合团队协作版本管理

• 插件丰富，适配IntelliJ IDEA、Eclipse、VS Code等全系列开发工具

4+1视图PlantUML简易示例

@startuml 4+1视图-逻辑层
title 4+1视图-逻辑视图（订单模块）
class OrderController{
    +createOrder()
    +cancelOrder()
}
class OrderService{
    +checkStock()
    +updateOrderStatus()
}
class OrderDAO{
    +insertOrder()
    +selectById()
}
OrderController --> OrderService
OrderService --> OrderDAO
@enduml

（三）Mermaid与PlantUML对比选择

工具	语法难度	规范支持	适用场景	上手成本
Mermaid	极简，类Markdown	基础C4、流程图、时序图	个人博客、技术文档、快速绘图、新手入门	极低
PlantUML	中等，专业语法	C4、4+1、UML全规范	企业级项目、复杂架构、架构设计、正式方案	中等
选型建议：新手快速绘图、写博客用Mermaid；企业级复杂架构、写正式技术方案用PlantUML，两者搭配使用，覆盖所有绘图场景。

三、架构图绘制实操总结

1. 规范选择：中小型项目/快速沟通/团队日常用C4模型，大型企业/复杂项目/正式汇报用4+1视图模型

2. 工具选择：Markdown文档Mermaid，专业架构设计/企业方案/复杂架构用PlantUML

3. 绘制原则：先宏观后微观，先画上下文图，再画容器图，最后按需画组件图；一张图一个层级，标注清晰，避免冗余

4. 实操技巧：工作中80%的场景，只需要画C4上下文图+容器图，就能满足沟通、汇报需求，无需过度细化

四、结语

标准化的架构图，是技术沟通的“通用语言”。掌握C4、4+1两大核心架构规范，搭配Mermaid、PlantUML文本绘图工具，既能告别杂乱无章的手绘架构图，又能提升团队协作效率，无论是做面试准备，还是撰写技术方案、工作述职，都能轻松拿出专业级架构图。

后续可结合实际业务场景，反复练习不同层级架构图的绘制，逐步形成自己的架构绘图规范，让架构图真正成为技术表达的核心工具。