C4系統架構圖

前言

在進行系統或者功能講解時，我們經常需要通過一張或者幾張圖來描述，但當我們拿到一張空白的紙時又總是感覺無從下手，或者畫出來的東西完全沒有什麼清晰的結構，次元混亂造成自己都不知道如何去描述，又或者是畫出來的東西極其複雜，根本不适合給别人去分享，如果你存在這樣的問題，那接下來的文章或許會有一些幫助，本文将介紹一種畫圖的方法論，使得架構結構更加清晰。

要點

在進行方法介紹前，我們需要理清架構圖的基本概念

1. 架構：架構就是對系統中的實體以及實體之間的關系所進行的抽象描述，是一系列的決策。架構是結構和願景。系統架構是概念的展現，是對物/資訊的功能與形式元素之間的對應情況所做的配置設定，是對元素之間的關系以及元素同周邊環境之間的關系所做的定義。
2. 架構圖：系統架構圖是為了抽象的表示軟體系統的整體輪廓和各個元件之間的互相關系和限制邊界，以及軟體系統的實體部署和軟體系統的演進方向的整體視圖。
3. 架構圖作用：解決溝通障礙、達成共識、減少歧義。

方法

在這裡給大家介紹的架構圖就是利用C4模型進行繪制的，C4 代表上下文（Context）、容器（Container）、元件（Component）和代碼（Code）——一系列分層的圖表，可以用這些圖表來描述不同縮放級别的軟體架構，每種圖表都适用于不同的閱聽人。要為你的代碼建立架構圖，首先需要一組通用的抽象來建立一種無處不在的語言，用來描述軟體系統的靜态結構。C4 模型使用容器（應用程式、資料存儲、微服務等）、元件和代碼來描述一個軟體系統的靜态結構。同時它還考慮到使用軟體系統的人。

下面案例來自網際網路

1. 系統上下文（System Context）

這是一個想象的待建設的網際網路銀行系統，它使用外部的大型機銀行系統存取客戶賬戶、交易資訊，通過外部電郵系統給客戶發郵件。可以看到，非常簡單、清晰，相信不需要解釋，都看的明白，裡面包含了需要建設的系統本身，系統的客戶，和這個系統有互動的周邊系統。

用途

這樣一個簡單的圖，可以告訴我們，要建構的系統是什麼；它的使用者是誰，誰會用它，它要如何融入已有的IT環境。這個圖的閱聽人可以是開發團隊的内部人員、外部的技術或非技術人員。即：

a.建構的系統是什麼

b.誰會用它

c.如何融入已有的IT環境

1. 系統容器（System Context）

容器圖是把語境圖裡待建設的系統做了一個展開。上圖中，除了使用者和外圍系統，要建設的系統包括一個基于javaspring mvc的web應用提供系統的功能入口，基于xamarin架構的手機app提供手機端的功能入口，一個基于java的api應用提供服務，一個mysql資料庫用于存儲，各個應用之間的互動都在箭頭線上寫明了。

用途

這個圖的閱聽人可以是團隊内部或外部的開發人員，也可以是運維人員。用途可以羅列為：

a.展現了軟體系統的整體形态

b.展現了高層次的技術決策

c.系統中的職責是如何分布的，容器間的是如何互動的

d.告訴開發者在哪裡寫代碼

1. 元件（Component）

元件圖是把某個容器進行展開，描述其内部的子產品。

用途

這個圖主要是給内部開發人員看的，怎麼去做代碼的組織和建構。其用途有：

a.描述了系統由哪些元件/服務組成

b.厘清了元件之間的關系和依賴

c.為軟體開發如何分解傳遞提供了架構

1. 代碼（Code）

它表明該元件由很多類組成，實作細節直接反映了代碼。這裡并不建議建立在這種詳細程度的圖表，有時候你可以直接從大多數 IDE 中擷取它們。

結語

利用C4模型進行架構圖繪制，可以通過抽絲剝繭的方式将整個架構一層一層的分離，不僅使得作圖之人有的放矢，同時也使得看圖之人了解的更加清晰。雖然這種畫圖方法也不見得就是最好的方法，但我想繪圖最本質的東西就是讓他人更好的了解。黑貓白貓，抓住老鼠就是好貓，同理一個能被大家都認同的架構圖就是一個好圖。