作者简介：阿里巴巴技术专家子静、彭生、于乐对本文亦有贡献。三花多年从事工作流引擎的研发，目前专注于高并发移动互联网应用的架构与开发。-前言-技术传播的价值不仅仅体现在缩短我们通过商业产品和开源项目构建应用程序的路径。加快业务上线速度还体现在优秀工程师在提升工作效率、优化产品性能、提升用户体验等方面的经验分享，提升我们的专业能力。接下来，阿里巴巴技术专家三花将分享他和他的团队画好架构图的思路和心得，希望对大家有所帮助。当我们想用一张或几张图来描述我们的系统时，是不是经常会遇到这样的情况：画布下不来，删了再回来？如何用一张图来描述我的系统，让产品、运维、开发都看得懂？画到一半不清楚观众是谁？画出来的图是产品功能图、技术图还是大杂烩？添加帧？不管你怎么画布局，你都不满意……如果你也有同样的困惑，本文将介绍一种画图的方法论，让架构图更清晰。-基本概念-什么是架构？体系结构是对系统中实体和实体之间关系的抽象描述，是一系列的决策。架构是结构和愿景。系统架构是概念的体现，对象/信息的功能与表单元素之间的对应关系的分布，元素之间关系的定义以及元素与周围环境的关系。做好架构是一项复杂的工作，也是一个很大的话题，本文不再赘述。拥有架构后，您需要做出利益相关者理解和遵循的相关决策。-什么是架构图？-系统架构图是抽象表示软件系统的总体轮廓、各组成部分之间的相互关系和约束边界，以及软件系统物理部署和软件系统演化方向的总体视图。-架构图的价值-一张图片胜过一千个单词。为了使利益相关者理解和遵循架构决策，需要传达架构信息。架构图是一个很好的载体。那么，绘制架构图的目的是：解决沟通障碍，达成共识，减少歧义-架构图分类-收集了很多资料，有很多分类，比较流行的一种是4+1视图，即场景视图、逻辑视图、物理视图、流程视图和开发视图。-场景视图-场景视图用于描述系统参与者和功能用例之间的关系，反映系统的最终需求和交互设计，通常用用例图表示。-逻辑视图-逻辑视图用于描述系统软件功能拆解后的组件关系、组件约束和边界，反映系统的整体组成和系统如何构建的过程，通常用UML组件图和类图。-物理视图-物理视图用于描述系统软件和物理硬件之间的映射关系，反映系统的组件如何部署在一组可计算的计算机节点上，用于指导部署和实施过程的软件系统。-处理流程图-处理流视图用于描述系统软件组件、数据输入和输出之间的通信时序，反映系统的功能流和数据流，通常用顺序图和流程图表示。-开发视图-开发视图用于描述系统的模块划分和组成，以及内部包的详细组成设计，服务于开发者，反映系统的开发和实施过程。以上五种架构视图从不同的角度代表了一个软件系统的不同特性，组合在一起作为一个架构蓝图来描述系统的架构。-什么是好的架构图-以上分类是前辈们的经验总结，图也是从网上摘来的，那么这些图好不好呢？是不是应该照葫芦画瓢画这样的图呢？先不说了先不管这些图好不好，我们想过这些图的分类和作用，总结一下。我们认为，在画出一张好的架构图之前，首先应该明确它的受众，然后思考要向他们传达什么信息。所以，不要为了画物理视图而画物理视图，为了画逻辑视图而画逻辑视图。相反，你应该根据不同的受众和不同的要传达的信息，准确地用图表表达出来。在某些类别中最终的图表可能是这样的。那么，画出的画面好坏的一个直接标准就是：观众是否准确地接收到了他们想要传达的信息。明确了这两点之后，站在观众的角度，好的架构图不需要解释，应该是自描述的，必须一致准确，足以和代码呼应。-常见问题-盒子代表什么？为什么用盒子而不是圆，它有什么特殊的含义吗？随意使用盒子或其他形状会造成混淆。虚线和实线是什么意思？箭头是什么意思？颜色是什么意思？随意使用线条或箭头可能会引起误解。运行时与编译时冲突？层次冲突？架构是一项复杂的业务，仅使用一张图来表示架构很容易导致莫名其妙的语义混淆。本文推荐的画法：C4模型使用容器（应用、数据存储、微服务等）、组件、代码来描述软件系统的静态结构。这几种图比较容易画，也给出了画图的要点，但最重要的是，在我们看来，它清楚地指出了每幅图可能的受众和意义。下面这个案例来自于C4官网，再补充一些我们的理解，看看如何更好的表达软件架构。上下文图（SystemContextDiagram）这是一个假想的要构建的网上银行系统。它使用外部大型机银行系统访问客户账户和交易信息，并通过外部电子邮件系统向客户发送电子邮件。可以看出非常简单明了。相信不用解释，大家都能看懂。它包括需要构建的系统本身，系统的客户，以及与这个系统交互的周??边系统。这样一个简单的图就可以告诉我们要构建的系统是什么；谁是它的用户，谁将使用它，以及如何将它集成到现有的IT环境中。此图的受众可以是开发团队内部的人员，也可以是技术人员或非技术人员的外部人员。即：正在构建的系统是什么？谁会使用它？它将如何适应现有的IT环境？它将如何绘制？中间是您自己的系统，周围是用户和与之交互的其他系统。这张图的关键是梳理好要构建的系统的用户和高层依赖关系。只需几分钟的整理和绘制。-容器图-容器图（ContainerDiagram）容器图将要构建的系统扩展到上下文图中。上图中，除了用户和外围系统外，待搭建的系统包括一个基于Java\SpringMVC的提供系统功能入口的Web应用，一个基于Xamarin的提供移动端功能入口的手机APP，以及一个基于Java的提供服务的API应用程序，使用MySQL数据库存储，箭头线上表示各应用程序之间的交互。看这张图的时候不注意是直角框还是圆角框，是实线箭头还是虚线箭头，连箭头的方向都不注意引起广泛关注。我们有很多种画图的方法，它们都定义了框架和线条的含义。这就需要绘制者和观看者都清楚地理解这些定义，以便阅读整个画面中的信息。但实际情况是，这往往是一个很高的要求，所以很多图片只能给出一个大概的概念。该图的受众可以是团队内部或外部的开发人员，也可以是运营人员。其目的可以列为：表示软件系统的总体形态。体现高层技术决策。责任如何在系统中分配以及容器如何交互。告诉开发人员在哪里编写代码。如何绘制？它由框图表示，其中可能包括名称、技术选择、职责以及这些框图之间的交互。如果涉及外部系统，最好划清界限。组件图（ComponentDiagram）组件图是对某个容器进行扩展，描述其内部模块。该图主要供内部开发人员查看如何组织和构建代码。其目的如下：描述系统由哪些组件/服务组成阐明组件之间的关系和依赖关系为如何分解和交付软件开发提供框架类图（Code/ClassDiagram）这个图显然是给技术人员看的，比较常见，就不详细介绍了。-案例分享-下面是一个内部实时数据工具的架构图。作为一张应该是自描述的架构图，这里就不多解释了。如果有看不懂的地方，那一定是画的不够好。绘制好的架构图可能有很多方法。本文主要介绍C4的方法，C4的理论也在不断发展。但不管是哪种绘画方法论，我们回归绘画的初衷，是为了更好的交流，在绘画的过程中不必被条条框框所束缚。总之，画之前想清楚：画给谁看，看什么，不解释怎么看懂。绘图工具包括：KeynoteXmindEdrawMaxVisioOmniGraffleProcessOnPhysicalviewintext下载地址：Win：http://t.cn/EXAGBDWMac：http://t.cn/EXAqtx
