技术架构图 阿里大神手把手教你画技术架构图

为什么用盒子而不用圆圈？它的特殊意义是什么？随意使用盒子或其他形状可能会造成混淆。

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

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

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

体系结构是一项复杂的任务，只使用一个图来表示体系结构很容易造成莫名其妙的语义混乱。

本文推荐的绘图方法

C4模型使用容器(应用程序、数据存储、微服务等。)，描述软件系统静态结构的组件和代码。这几类图片很好画，也给出了画的要点，但最重要的是它明确指出了每一类图片可能的受众和意义。

以下案例来自C4官网，然后补充一些我们的理解，看看如何更好的表达软件架构

1、上下文图(系统上下文图)

这是一个假想的即将建成的网上银行系统，使用外部主机银行系统访问客户账户和交易信息，通过外部电子邮件系统向客户发送电子邮件。可见很简单明了，相信也没必要解释。它包括要构建的系统本身、系统的客户以及与该系统交互的外围系统。

★用法

这么简单的图，就能告诉我们要建的系统是什么；谁是its用户，谁将使用它，它将如何集成到现有的IT环境中。该图的受众可以是开发团队的内部人员、外部技术人员或非技术人员。即:

构建的系统是什么谁会用它如何融入已有的IT环境

★如何画画

中间是你自己的系统，周围是用户和其他与之交互的系统。这个图的关键是把要构建的系统的用户和高层依赖关系整理出来，只需要几分钟就可以画出来。

2.容器图

容器图扩展了要在上下文图中构建的系统。

在上图中，除了用户和外围系统，待建系统还包括基于javaspring mvc的web应用提供系统的功能门户，基于xamarin架构的移动app提供手机的功能门户，基于java的api应用提供服务，mysql数据库用于存储，各种应用之间的交互用箭头线表示。

当你看这张图的时候，你不会注意它是直角框还是圆角框，是实心箭头还是虚线箭头，甚至箭头的方向也不会引起太多注意。

我们有很多画图方法，都是定义框架和线条的含义。这就需要画图的人和画图的人都要清楚的理解这些定义，才能读懂整个画面中的信息。现实是这往往是一个很高的要求，所以很多图只能看到一个大概的意思。

★用法

这个图的受众可以是团队内外的开发人员，也可以是运维人员。用途可列举如下:

展现了软件系统的整体形态体现了高层次的技术决策系统中的职责是如何分布的，容器间的是如何交互的告诉开发者在哪里写代码

★如何画画

用框图表示，内部可能包括名称、技术选择、职责以及这些框图之间的交互。如果涉及外部系统，最好明确界限。

3.构件图

组件图是扩展一个容器，描述其内部模块。

★用法

这个图主要是给内部开发人员看如何组织构建代码。其用途是:

描述了系统由哪些组件/服务组成厘清了组件之间的关系和依赖为软件开发如何分解交付提供了框架

4.代码/类图

这个数字显然是给技术人员看的。常见，不再详细介绍。

案例分享

下面是一个内部实时数据工具的架构图。作为一个应该自描述的架构图，这里就不多解释了。如果有什么你不能理解的，那肯定是不够好。

可能有很多方法可以画出好的架构图。本文主要介绍C4，C4的理论是不断演变的。但无论什么样的绘画方法论，我们都回归了绘画的初衷，更好的交流。我们在画画的过程中，不一定要受到规章制度的限制。简而言之，画图前思考:给谁看，看什么，怎么理解，不需要解释。

参考材料

C4 官网：https://c4model.com/为什么需要软件架构图：https://www.infoq.cn/article/GhprrUlOYyOqS8*FR1pH书籍：《程序员必读之软件架构》

关于作者:三幅画，阿里巴巴技术专家紫晶、彭胜、于乐也为本文投稿。三和从事工作流引擎的研发多年，现在专注于高并发移动互联网应用的架构和开发。本文的撰稿人来自阿里巴巴零售部。

原文:http://t.cn/EXKQ5bX

标题图:来自谷歌图片搜索

版权:本文版权归原作者所有

人年轻的时候，最头疼的一件事就是决定人生该做什么。

——王小波《工作与生活》