Skip to content

如何画出优秀的架构图

ps: 此笔记中的图都是自己画的或是百度找的

4R软件架构定义

  • 4R架构, 软件架构指软件系统的顶层(Rank)结构, 它定义了系统由哪些角色(Role)组成, 角色之间的关系(Relation)和运作规则(Rule)
    • Rank, 顶层结构, 架构是分层的
    • Role, 组成角色, 系统包含哪些角色
    • Relation, 角色关系, 角色之间的关系
    • Rule, 运作规则, 角色如何协作完成系统功能

4+1架构视图

  • 4+1视图定义
    • 逻辑视图: 系统提供给用户的功能, 对应UML的class和state diagrams
    • 处理视图: 系统的处理过程, 对应UML的sequence和activity diagrams
    • 开发视图: 程序员角度看系统的逻辑组成, 对应UML的package diagrams
    • 物理视图: 系统工程师角度看系统的物理组成, 对应UML的deployment diagrams
    • 场景视图: 用户角度看系统需要实现的需求, 对应UML的use case diagrams
  • 但国内很少用4+1架构视图来描述架构, 因为现在系统架构复杂度增加, UML图也不好看, 逻辑, 开发, 处理视图概念容易混淆

大厂常见架构图介绍和画法

架构图分类

1745225361712

业务架构图

  • 描述系统对用户提供了什么业务功能, 类似于4+1视图的场景视图
  • 使用场景
    • 产品人员规划业务
    • 给高P汇报业务
    • 给新员工培训业务
  • 技巧
    • 业务分组管理
    • 可以使用不同颜色来标识业务状态

1745225367883

客户端架构/前端架构

  • 客户端和前端的领域逻辑架构, 类似于4+1视图的逻辑视图
  • 使用场景: 架构培训
  • 技巧
    • 通过不同颜色来标识不同角色
    • 通过连接线来表示关系

1745225375979

系统架构

  • 也称后端架构或技术架构
  • 使用场景: 架构培训
  • 技巧
    • 通过不同颜色来标识不同角色
    • 通过连接线来表示关系
  • 简单可以画一张图

1745225381837

  • 复杂的话, 可以用两张图
    • 功能示意图, 详细罗列其中的组件, 类似下面这样吧

1745225391662

- 关系示意图, 表示出组件之间的关系, 类似下面这样

1745225398834

应用架构

  • 描述后端系统由哪些应用组成
  • 使用场景
    • 项目开发, 测试
    • 部署发布
    • 子域架构设计
  • 技巧同上
  • 如下示例, 主要形容一个子系统下的各个服务(图不是很好, 少了调用关系的连线)

1745225406100

部署架构

  • 描述后端系统部署情况, 对应4+1中的物理视图
  • 使用场景
    • 总体架构设计
    • 运维规划和优化
  • 技巧: 善用图标

1745225413160

系统序列图

  • 关键点是场景, 架构设计时只需画核心场景 1745225419176