点击上方蓝色字体设星标，用画图方法论让架构图更清晰

hwyzw

    点击上方蓝色字体，选择“设为星标”

    优质文章，及时送达

    作者 |三画

    来源 |公众号「阿里巴巴云原生」

    在尝试用一幅或几幅图画来展现我们的系统时，我们是否常常遭遇以下状况：

    若读者面临相似的迷茫，本文将阐述一种绘图的理论框架，以助于使系统架构图更加直观易懂。

    先理清一些基础概念

    1. 什么是架构

    架构是对系统中各个元素及其相互间联系的一种概括性表述，它涉及一系列关键的抉择。

    架构是结构和愿景。

    系统架构展现了理念的实质，它涉及对事物或信息的功能性及形态要素间相互关系的安排，同时定义了这些要素间的相互联系以及它们与周围环境间的相互作用。

    构建一个完善的结构是一项繁杂的工作，同时也是一个相当广泛的议题，本文将不再对此进行详细探讨。在架构确定之后，必须确保所有相关方都能理解和遵守相应的决策。

    2. 什么是架构图

    系统架构图旨在以抽象的方式展现软件系统的整体形态、各组件间的互动关系及约束范围，同时全面呈现软件系统的物理布局及其发展演变的整体概览。

    3. 架构图的作用

    一张图胜过千言万语。为了让所有相关方能够理解和遵守架构决策，我们必须确保架构信息得到有效传达。架构图作为传递这些信息的有效工具，其绘制目的在于：

    4. 架构图分类

    收集了众多资料，种类繁多，其中一种颇受欢迎的分类方法称为4+1视图，它包括场景视图、逻辑视图、物理视图、处理流程视图以及开发视图。

    场景视图主要用来阐述系统参与者与功能用例之间的相互联系，展示了系统的基本需求以及交互设计，一般通过用例图来进行表达。

    逻辑视图旨在阐述系统软件在功能分解后各组件间的相互联系，以及组件所受的限制和作用范围，它揭示了系统的整体构成及其构建方式。此类视图通常借助UML（统一建模语言）中的组件图和类图进行展示。

    物理视图旨在阐述系统软件与物理硬件之间的对应关系，揭示了系统各个组成部分在一系列可计算节点上的部署情况，并为软件系统的部署与实施提供了指导。

    流程视图旨在展示系统软件各组件间的交互顺序，包括数据的进出情况，同时揭示了系统的功能运作与数据流转，一般通过时序图和流程图来呈现。

   

    开发视图旨在阐述系统的模块分布及其构成，并对内部包的组成设计进行深入细化，旨在辅助开发人员，全面展示系统开发的实施过程。

    这五种架构视图分别从多个维度展现了软件系统的独特属性，当它们融合在一起时，便构成了系统架构的完整蓝图。

    怎样的架构图是好的架构图

    这些分类源自前人的经验归纳，图中内容亦源自网络搜集，那么，这些图画的质量如何呢？我们是否应该照搬照抄，去绘制类似的图画呢？

    不管这些图质量如何，我们经过对这些图的分类及其用途的思考，得出结论：在绘制一幅优秀的架构图之前，首要任务是确定目标受众，并明确我们想要向他们传达的信息。因此，不应仅仅为了绘制物理视图而绘制物理视图，或为了绘制逻辑视图而绘制逻辑视图，而应根据受众的差异性以及信息传递的需求，通过图表精确地展现出来。最终的图表或许就包含在这些分类之中。评判一幅画作优劣的直接依据之一，在于观者是否能够精确地捕捉到作者意图传达的核心信息。

    在充分理解这两点的基础上，从接收者的视角来看，一幅优秀的架构图无需过多说明，其自身应具备清晰的描述性，同时还要确保内在的一致性以及高度的精确度，以便与代码内容相辅相成。

    画架构图遇到的常见问题

    1. 方框代表什么？

    为何选择方框而非圆形，这背后是否蕴含着某种特定的象征意义？若随意选用方框或其他图形，是否有可能导致理解上的困惑？

    2. 虚线、实线什么意思？箭头什么意思？颜色什么意思？

    随意使用线条或者箭头可能会引起误会。

    3. 运行时与编译时冲突？层级冲突？

    构建架构是一项繁复的任务，若仅依赖单一图表来展示，往往会导致难以理解的语义混淆。

    本文推荐的画图方法

    C4模型通过运用容器、组件以及代码等元素来阐述软件系统的静态构成。此类图形绘制相对简便，且已提供绘图关键点，然而，我们认为其最核心的价值在于，它清晰地定义了各类图形的目标读者群体及其内涵。

    此案例源自 C4 官方网站，我们在此基础上融入了自己的见解，旨在探讨如何更有效地阐述软件架构。

    1. 语境图(  )

   

    这是一款设想中的待开发互联网银行平台，该平台通过接入外部的大型机银行系统进行客户账户和交易数据的处理，并利用外部电邮系统向客户发送邮件。其结构直观、明了，无需过多解释，一目了然。其中不仅涵盖了待构建的系统本身，还包括了系统的用户群体，以及与该系统进行交互的其他外围系统。

    用途

    这张图示简洁明了，它揭示了我们所要构建的系统性质；指明了系统的使用者群体，以及他们如何使用它，以及它如何与现有的信息技术架构相融合。该图适用于开发团队的成员，无论是内部的技术专家还是外部的非技术人员。换言之：

    怎么画

    系统核心部分由自身构成，四周环绕着用户以及与之相互影响的各类系统。此图的核心在于理清即将构建系统的用户群体及其高层级的依赖关系，一旦梳理完毕，绘制出来仅需短短几分钟。

    2. 容器图( )

    容器图是把语境图里待建设的系统做了一个展开。

    图中所示，除了用户界面及外围系统，待建系统包含一个采用Java和MVC模式的Web应用程序，该程序作为功能接入点；一个基于Java架构的手机应用程序，作为移动端功能接入；一个Java API应用程序，负责提供服务；以及一个MySQL数据库，用于数据存储。各应用间的交互关系，已在图中箭头处明确标注。

    观察这幅图像时，人们往往不会注意到其中的直角或圆角方框区别，亦不会留意箭头是实线还是虚线，甚至箭头的具体指向也并未引起过多的关注。

    我们拥有众多绘画技法，每种方法都对框与线的意义进行了阐释。这就要求绘图者与观图者都能准确把握这些定义，以便充分解读图中的信息。然而，现实中这往往是一项极高的挑战，因此，众多图形只能被粗略地理解其大致含义。

    用途

    该图表适用于团队内部及外部的软件开发者，亦适用于运维团队。其应用范围包括但不限于：

    怎么画

    以图表形式展现，其内可包含项目名称、技术选型、角色分工，同时需体现这些图表单元间的相互联系，若涉及外部系统，还需清晰界定其边界。

    3. 组件图( )

    组件图是把某个容器进行展开，描述其内部的模块。

    用途

    该图表主要面向内部开发团队，旨在指导他们进行代码的整理与构建工作。其具体用途包括：

    4. 类图(Code/Class )

    这个图很显然是给技术人员看的，比较常见，就不详细介绍了。