当前位置：网站首页>Skills required to be a good architect: How to draw a system architecture that everyone will love?What's the secret?Come and open this article to see it!...

Skills required to be a good architect: How to draw a system architecture that everyone will love?What's the secret?Come and open this article to see it!...

2022-08-03 10:48:00 【Zen and the Art of Computer Programming】

引子

作为软件开发者,我们在工作中难免要画很多的架构图,但是很多人对于如何去画架构图其实是很模糊的,有那么多种类型的图,我们究竟该选哪个,用应该怎么画呢？今天我们一起来看看这个问题.

什么是架构图？

存在着一个极为重要的特质,它是人、城市、建筑或荒野的生命与精神的根本准则.这种特质客观明确,但却无法命名.( C·亚历山大《The Timeless Way of Building》)

在谈什么是架构图之前,我们先来聊聊什么是架构.

软件系统的架构是一个隐喻,类似于建筑物的架构.

做出了强有力的和深刻的抽象是一种艺术.它需要极大的能力深入事物的本质而得到真正深刻的抽象.在科学中,没有谁能告诉你如何去做,在设计中也没有谁能告诉你如何去做.( C·亚历山大《The Timeless Way of Building》)

抽象是计算机科学中最为重要的概念之一.比如我们为一组函数规定一个简单的应用程序接口（API）就是一个很好的编程习惯,程序员无需了解它内部的工作便可以使用这些代码.

4R 架构模式

软件架构指的是软件系统的顶层设计（Rank）,它定义了系统由哪些角色（Role）组成,角色之间的关系（Relation）和运作规则（Rule）,如下图所示.

4+1 View Model

另外,还有一个经典的 4+1 View Model,如下图.

design [logical] View：设计逻辑视图
process View：流程视图
implementation [development] View：实现视图-开发编码
deployment [physical] View：物理视图-部署
use case view(point)s, Scenarios：用户使用视图,场景视图等
( Kruchten, Rational )

Maps of your code：用于可视化软件架构的 C4 模型: 上下文、容器、组件和代码

C4 模型是绘制软件架构图的“抽象优先”方法,基于反映软件架构师和开发人员如何思考和构建软件的抽象.

在 C4 模型中,软件系统由一个或多个容器（ Web 应用程序、移动应用程序、桌面应用程序、数据库、文件系统等）组成,每个容器包含一个或多个组件,而这些组件又由一个或多个代码元素实现（例如类、接口、对象、函数等）.

C4 模型中的角色

1、人

一个人代表您的软件系统的人类用户之一（例如演员、角色、角色等）.

2、软件系统

软件系统是最高级别的抽象,它描述了为用户提供价值的东西,无论他们是不是人类.这包括您正在建模的软件系统,以及您的软件系统所依赖的其他软件系统（反之亦然）.

在许多情况下,软件系统由单个软件开发团队“拥有”.

3、容器（应用程序和数据存储）

在 C4 模型中,容器代表应用程序或数据存储.容器是为了使整个软件系统工作而需要运行的东西.实际上,容器类似于：

服务器端 Web 应用程序：在 Apache Tomcat 上运行的 Java EE Web 应用程序、在 Microsoft IIS 上运行的 ASP.NET MVC 应用程序、在 WEBrick 上运行的 Ruby on Rails 应用程序、Node.js 应用程序等.
客户端 Web 应用程序：使用 Angular、Backbone.JS、jQuery 等在 Web 浏览器中运行的 JavaScript 应用程序.
客户端桌面应用程序：使用 WPF 编写的 Windows 桌面应用程序、使用 Objective-C 编写的 OS X 桌面应用程序、使用 JavaFX 编写的跨平台桌面应用程序等.
移动应用程序：Apple iOS 应用程序、Android 应用程序、Microsoft Windows Phone 应用程序等.
服务器端控制台应用程序：独立（例如“public static void main”）应用程序、批处理等.
无服务器函数：单个无服务器函数（例如 Amazon Lambda、Azure 函数等）.
数据库：关系数据库管理系统、文档存储、图形数据库等中的模式或数据库,例如 MySQL、Microsoft SQL Server、Oracle 数据库、MongoDB、Riak、Cassandra、Neo4j 等.
Blob 或内容存储：Blob 存储（例如 Amazon S3、Microsoft Azure Blob Storage 等）或内容交付网络（例如 Akamai、Amazon CloudFront 等）.
文件系统：完整的本地文件系统或较大网络文件系统的一部分（例如 SAN、NAS 等）.
Shell 脚本：用 Bash 等编写的单个 shell 脚本.
ETC

容器本质上是一个上下文或边界,在其中执行一些代码或存储一些数据.每个容器都是可单独部署/可运行的事物或运行时环境,通常（但不总是）在其自己的进程空间中运行.因此,容器之间的通信通常采用进程间通信的形式.

4、组件

“组件”一词在软件开发行业中是一个非常重的术语,但在这种情况下,组件是封装在定义良好的接口后面的一组相关功能.如果您使用 Java 或 C# 之类的语言,考虑组件的最简单方法是它是接口后面的实现类的集合.诸如这些组件如何打包（例如,一个组件与每个 JAR 文件、DLL、共享库等多个组件）等方面是一个独立且正交的问题.

这里需要注意的重要一点是,容器内的所有组件通常都在同一个进程空间中执行.在 C4 模型中,组件不是可单独部署的单元.

再回到我们的问题,到底什么是架构图,从字面意思上来讲,架构图 = 架构 + 图,它是你当前架构的一种表达方式,当然架构设计的领域是很多的,比如业务架构,系统架构,技术架构,模型架构等等.

针对不同的架构类型,当然也就需要用不同的架构图去表现它,我们都知道现实世界到软件世界的映射,是一个不断抽象的过程,这其中的方法就是不断的建立模型,所以架构的过程其实就是建模的过程,而架构图表现的就是你建模的方式.

为什么要画架构图？

既然架构的过程就是建模的过程,为什么我们要费时费力的去画架构图呢？直接用代码或者文字体现不就行了吗？我觉得这个问题可以从 2 点方面来回答：

1、从技术角度来讲：架构图相比其他表现方式,可以更方便的表明当前系统的结构体系,减少同事或者与客户之间的认知障碍,达到统一认知.

2、从阅读角度来讲：图的表现力远远高于文字的表现力,这也是为什么人们常说“一图胜千言,NO 图 NO BB”.

架构图分类

根据我们工作职责的不同,我们所需要体现的架构图也会有所不同,比如你是一个PD,你考虑的更多是产品架构,比如你是一个前端,你考虑的更多是前端技术体系和模块的架构,那么这里总结了一下我们常见的不同架构分类,主要有以下内容.

如何画好一张架构图?

现在我们知道了架构的分类,那么我们如何开始去画一张架构图呢？这里有几个路径,你可以参考一下：

搞清楚要画的架构图的类型
抽离架构图中的关键要素
梳理各个要素之间的关系：包含关系、引用关系、同级关系等等
根据以上信息串联起来,并标识清楚.

Diagram：一个使用代码绘制系统架构图的工具

程序员必须要有一个自己的“工具箱”.

《论语·魏灵公》:“工欲善其事,必先利其器.”

接下来,我们就来介绍,如何使用 Python 代码绘制漂亮的系统架构图工具Diagrams.

Diagrams

Diagram as Code.

Diagrams lets you draw the cloud system architecture in Python code. It was born for prototyping a new system architecture design without any design tools. You can also describe or visualize the existing system architecture as well. Diagrams currently supports main major providers including: AWS, Azure, GCP, Kubernetes, Alibaba Cloud, Oracle Cloud etc... It also supports On-Premise nodes, SaaS and major Programming frameworks and languages.

Diagram as Code also allows you to track the architecture diagram changes in any version control system.

NOTE: It does not control any actual cloud resources nor does it generate cloud formation or terraform code. It is just for drawing the cloud system architecture diagrams.

Getting Started

It requires Python 3.6 or higher, check your Python version first.

It uses Graphviz to render the diagram, so you need to install Graphviz to use diagrams. After installing graphviz (or already have it), install the diagrams.

Graphviz下载地址: https://graphviz.gitlab.io/download/

macOS users can download the Graphviz via brew install graphviz if you're using Homebrew.

$brew install graphviz

然后,配置目录 /usr/local/Cellar/graphviz/5.0.0/bin 到PATH环境变量.

$/usr/local/Cellar/graphviz/5.0.0/bin
acyclic      circo        dijkstra     dot_builtins gc           gv2gml       gvgen        gvpack       gxl2gv       nop          prune        tred
bcomps       cluster      dot          edgepaint    gml2gv       gv2gxl       gvmap        gvpr         mm2gv        osage        sccmap       twopi
ccomps       diffimg      dot2gxl      fdp          graphml2gv   gvcolor      gvmap.sh     gxl2dot      neato        patchwork    sfdp         unflatten

# using pip (pip3)
$ pip3 install diagrams

Or, using pipenv/poetry install:

# using pipenv
$ pipenv install diagrams

# using poetry
$ poetry add diagrams

You can start with quick start. Check out guides for more details, and you can find all available nodes list in here.

Quick Start

Example 1

# diagram1.pyfrom diagrams import Diagramfrom diagrams.aws.compute import EC2from diagrams.aws.database import RDSfrom diagrams.aws.network import ELBwith Diagram("diagram1", show=False):
    ELB("lb") >> EC2("web") >> RDS("userdb")

This code generates below diagram.

$ python diagram1.py

It will be saved as diagram1.png on your working directory.

Example 2

from diagrams import Cluster, Diagramfrom diagrams.aws.compute import ECSfrom diagrams.aws.database import ElastiCache, RDSfrom diagrams.aws.network import ELBfrom diagrams.aws.network import Route53with Diagram("Clustered Web Services", show=False):
    dns = Route53("dns")
    lb = ELB("lb")

    with Cluster("Services"):
        svc_group = [ECS("web1"),
                     ECS("web2"),
                     ECS("web3")]

    with Cluster("DB Cluster"):
        db_primary = RDS("userdb")
        db_primary - [RDS("userdb ro")]

    memcached = ElastiCache("memcached")

    dns >> lb >> svc_group
    svc_group >> db_primary
    svc_group >> memcached

Example 3

from diagrams import Cluster, Diagramfrom diagrams.gcp.analytics import BigQuery, Dataflow, PubSubfrom diagrams.gcp.compute import AppEngine, Functionsfrom diagrams.gcp.database import BigTablefrom diagrams.gcp.iot import IotCorefrom diagrams.gcp.storage import GCSwith Diagram("Message Collecting", show=False):
    pubsub = PubSub("pubsub")

    with Cluster("Source of Data"):
        [IotCore("core1"),
         IotCore("core2"),
         IotCore("core3")] >> pubsub    with Cluster("Targets"):
        with Cluster("Data Flow"):
            flow = Dataflow("data flow")

        with Cluster("Data Lake"):
            flow >> [BigQuery("bq"),
                     GCS("storage")]

        with Cluster("Event Driven"):
            with Cluster("Processing"):
                flow >> AppEngine("engine") >> BigTable("bigtable")

            with Cluster("Serverless"):
                flow >> Functions("func") >> AppEngine("appengine")

    pubsub >> flow

Example 4

from diagrams import Cluster, Diagramfrom diagrams.onprem.analytics import Sparkfrom diagrams.onprem.compute import Serverfrom diagrams.onprem.database import PostgreSQLfrom diagrams.onprem.inmemory import Redisfrom diagrams.onprem.aggregator import Fluentdfrom diagrams.onprem.monitoring import Grafana, Prometheusfrom diagrams.onprem.network import Nginxfrom diagrams.onprem.queue import Kafkawith Diagram("Advanced Web Service with On-Premise", show=False):
    ingress = Nginx("ingress")

    metrics = Prometheus("metric")
    metrics << Grafana("monitoring")

    with Cluster("Service Cluster"):
        grpcsvc = [
            Server("grpc1"),
            Server("grpc2"),
            Server("grpc3")]

    with Cluster("Sessions HA"):
        primary = Redis("session")
        primary - Redis("replica") << metrics
        grpcsvc >> primary    with Cluster("Database HA"):
        primary = PostgreSQL("users")
        primary - PostgreSQL("replica") << metrics
        grpcsvc >> primary

    aggregator = Fluentd("logging")
    aggregator >> Kafka("stream") >> Spark("analytics")

    ingress >> grpcsvc >> aggregator

Contributing

To contribute to diagram, check out contribution guidelines.

Let me know if you are using diagrams! I'll add you in showcase page. (I'm working on it!) :)

Who uses it?

GitPitch is the perfect slide deck solution for Tech Conferences, Training, Developer Advocates, and Educators. Diagrams is now available as a dedicated Cloud Diagram Markdown Widget so you can use Diagrams directly on any slide for conferences, meetups, and training.

Cloudiscovery helps you to analyze resources in your cloud (AWS/GCP/Azure/Alibaba/IBM) account. It allows you to create a diagram of analyzed cloud resource map based on this Diagrams library, so you can draw your existing cloud infrastructure with Cloudiscovery.

Airflow Diagrams is an Airflow plugin that aims to easily visualise your Airflow DAGs on service level from providers like AWS, GCP, Azure, etc. via diagrams.

Other languages

If you are familiar to Go, you can use go-diagrams as well.

License

MIT

附：常用的画图工具

架构图：draw.io 本地版,内部有非常多的预设标准,非常强大.
ProcessOn：网页版工具,也非常强大,如果你有同步的需求,可以使用它.
Plant UML 图：https://plantuml.com/zh/ ,有非常多的示例,同时 VScode / webstorm都有对应的插件,可以方便的在编辑器中书写.

最后,一张好的架构图不仅仅可以形象的描述业务领域的抽象设计,同时也要有美观的展示,它应该能帮助阅读者更好的了解当前系统的层次结构,同时也能帮助开发者自己更好的去设计和完善系统.

最后还是那句话：“一图胜千言,NO 图 NO BB”.

【《禅与计算机程序设计艺术》更多精华文章阅读】