技術傳播的價值，不僅僅體現(xiàn)在通過商業(yè)化產品和開源項目來縮短我們構建應用的路徑嘱巾。加速業(yè)務的上線速率赴穗，也體現(xiàn)在優(yōu)秀工程師的工作效率提升炕吸、產品性能優(yōu)化和用戶體驗改善等經驗方面的分享，以提高我們的專業(yè)能力背亥。
接下來秒际，阿里巴巴技術專家三畫，將分享自己和團隊在畫好架構圖方面的理念和經驗狡汉，希望對你有所幫助娄徊。當我們想用一張或幾張圖來描述我們的系統(tǒng)時，是不是經常遇到以下情況：
對著畫布無從下手盾戴、刪了又來?如何用一張圖描述我的系統(tǒng)寄锐，并且讓產品、運營、開發(fā)都能看明白?畫了一半的圖還不清楚受眾是誰?畫出來的圖到底是產品圖功能圖還是技術圖又或是大雜燴?圖上的框框有點少是不是要找點兒框框加進來?布局怎么畫都不滿意…
如果有同樣的困惑橄仆，本文將介紹一種畫圖的方法論剩膘，來讓架構圖更清晰。
先厘清一些基礎概念
什么是架構?
架構就是對系統(tǒng)中的實體以及實體之間的關系所進行的抽象描述盆顾，是一系列的決策怠褐。
架構是結構和愿景。系統(tǒng)架構是概念的體現(xiàn)您宪，是對物/信息的功能與形式元素之間的對應情況所做的分配奈懒，是對元素之間的關系以及元素同周邊環(huán)境之間的關系所做的定義。
做好架構是個復雜的任務宪巨，也是個很大的話題磷杏，本篇就不做深入了。有了架構之后捏卓，就需要讓干系人理解极祸、遵循相關決策。
什么是架構圖?
系統(tǒng)架構圖是為了抽象地表示軟件系統(tǒng)的整體輪廓和各個組件之間的相互關系和約束邊界天吓，以及軟件系統(tǒng)的物理部署和軟件系統(tǒng)的演進方向的整體視圖贿肩。
架構圖的作用
一圖勝千言。要讓干系人理解龄寞、遵循架構決策汰规，就需要把架構信息傳遞出去。架構圖就是一個很好的載體物邑。
那么溜哮，畫架構圖是為了：
解決溝通障礙
達成共識
減少歧義
架構圖分類
搜集了很多資料，分類有很多色解，有一種比較流行的是 4+1 視圖茂嗓，分別為場景視圖、邏輯視圖科阎、物理視圖述吸、處理流程視圖和開發(fā)視圖。
場景視圖
場景視圖用于描述系統(tǒng)的參與者與功能用例間的關系锣笨，反映系統(tǒng)的最終需求和交互設計蝌矛，通常由用例圖表示。
邏輯視圖
邏輯視圖用于描述系統(tǒng)軟件功能拆解后的組件關系错英，組件約束和邊界入撒，反映系統(tǒng)整體組成與系統(tǒng)如何構建的過程，通常由 UML 的組件圖和類圖來表示椭岩。
物理視圖
物理視圖用于描述系統(tǒng)軟件到物理硬件的映射關系茅逮，反映出系統(tǒng)的組件是如何部署到一組可計算機器節(jié)點上璃赡，用于指導軟件系統(tǒng)的部署實施過程。
處理流程視圖
處理流程視圖用于描述系統(tǒng)軟件組件之間的通信時序献雅，數(shù)據(jù)的輸入輸出碉考，反映系統(tǒng)的功能流程與數(shù)據(jù)流程，通常由時序圖和流程圖表示惩琉。
開發(fā)視圖
開發(fā)視圖用于描述系統(tǒng)的模塊劃分和組成豆励，以及細化到內部包的組成設計，服務于開發(fā)人員瞒渠，反映系統(tǒng)開發(fā)實施過程良蒸。
以上 5 種架構視圖從不同角度表示一個軟件系統(tǒng)的不同特征，組合到一起作為架構藍圖描述系統(tǒng)架構伍玖。
怎樣的架構圖是好的架構圖
上面的分類是前人的經驗總結嫩痰，圖也是從網上摘來的，那么這些圖畫的好不好呢?是不是我們要依葫蘆畫瓢去畫這樣一些圖?
先不去管這些圖好不好窍箍，我們通過對這些圖的分類以及作用串纺，思考了一下，總結下來椰棘。
我們認為纺棺，在畫出一個好的架構圖之前， 首先應該要明確其受眾邪狞，再想清楚要給他們傳遞什么信息 祷蝌。
所以，不要為了畫一個物理視圖去畫物理視圖帆卓，為了畫一個邏輯視圖去畫邏輯視圖巨朦，而應該根據(jù)受眾的不同，傳遞的信息的不同剑令，用圖準確地表達出來糊啡，最后的圖可能就是在這樣一些分類里。
那么吁津，畫出的圖好不好的一個直接標準就是：受眾有沒有準確接收到想傳遞的信息棚蓄。
明確這兩點之后，從受眾角度來說碍脏，一個好的架構圖是不需要解釋的癣疟，它應該是自描述的，并且要具備一致性和足夠的準確性潮酒，能夠與代碼相呼應。
畫架構圖遇到的常見問題
方框代表什么?
為什么適用方框而不是圓形邪蛔，它有什么特殊的含義嗎?隨意使用方框或者其他形狀可能會引起混淆急黎。
虛線、實線什么意思?箭頭什么意思?顏色什么意思?
隨意使用線條或者箭頭可能會引起誤會。
運行時與編譯時沖突?層級沖突?
架構是一項復雜的工作勃教，只使用單個圖表來表示架構很容易造成莫名其妙的語義混亂淤击。
本文推薦的畫圖方法
C4 模型使用容器(應用程序、數(shù)據(jù)存儲故源、微服務等)污抬、組件和代碼來描述一個軟件系統(tǒng)的靜態(tài)結構。
這幾種圖比較容易畫绳军，也給出了畫圖要點印机，但最關鍵的是，我們認為门驾，它明確指出了每種圖可能的受眾以及意義射赛。
下面的案例來自 C4 官網，然后加上了一些我們的理解奶是，來看看如何更好的表達軟件架構楣责。
語境圖(System Context Diagram)
這是一個想象的待建設的互聯(lián)網銀行系統(tǒng)，它使用外部的大型機銀行系統(tǒng)存取客戶賬戶聂沙、交易信息秆麸，通過外部電郵系統(tǒng)給客戶發(fā)郵件。
可以看到及汉，非常簡單沮趣、清晰，相信不需要解釋豁生，都看的明白兔毒，里面包含了需要建設的系統(tǒng)本身，系統(tǒng)的客戶甸箱，和這個系統(tǒng)有交互的周邊系統(tǒng)育叁。
這樣一個簡單的圖，可以告訴我們芍殖，要構建的系統(tǒng)是什么;它的用戶是誰豪嗽，誰會用它，它要如何融入已有的 IT 環(huán)境豌骏。
這個圖的受眾可以是開發(fā)團隊的內部人員龟梦、外部的技術或非技術人員。即：
構建的系統(tǒng)是什么
誰會用它
如何融入已有的 IT 環(huán)境
怎么畫?中間是自己的系統(tǒng)窃躲，周圍是用戶和其他與之相互作用的系統(tǒng)计贰。這個圖的關鍵就是梳理清楚待建設系統(tǒng)的用戶和高層次的依賴，梳理清楚了畫下來只需要幾分鐘時間蒂窒。
容器圖(Container Diagram)
容器圖是把語境圖里待建設的系統(tǒng)做了一個展開躁倒。
上圖中荞怒，除了用戶和外圍系統(tǒng)，要建設的系統(tǒng)包括一個基于 Java\Spring MVC的 Web 應用提供系統(tǒng)的功能入口秧秉，基于 Xamarin 架構的手機 App 提供手機端的功能入口褐桌，一個基于 Java 的 API 應用提供服務，一個 MySQL 數(shù)據(jù)庫用于存儲象迎，各個應用之間的交互都在箭頭線上寫明了荧嵌。
看這張圖的時候，不會去關注到圖中是直角方框還是圓角方框砾淌，不會關注是實線箭頭還是虛線箭頭啦撮，甚至箭頭的指向也沒有引起太多注意。
我們有許多的畫圖方式拇舀，都對框逻族、線的含義做了定義，這就需要畫圖的人和看圖的人都清晰的理解這些定義骄崩，才能讀全圖里的信息聘鳞。
而現(xiàn)實是，這往往是非常高的一個要求要拂，所以抠璃，很多圖只能看個大概的含義。
這個圖的受眾可以是團隊內部或外部的開發(fā)人員脱惰，也可以是運維人員搏嗡。用途可以羅列為：
展現(xiàn)了軟件系統(tǒng)的整體形態(tài)。
體現(xiàn)了高層次的技術決策拉一。
系統(tǒng)中的職責是如何分布的采盒，容器間是如何交互的。
告訴開發(fā)者在哪里寫代碼蔚润。
怎么畫?用一個框圖來表示磅氨，內部可能包括名稱、技術選擇嫡纠、職責烦租，以及這些框圖之間的交互，如果涉及外部系統(tǒng)除盏，最好明確邊界叉橱。
組件圖(Component Diagram)
組件圖是把某個容器進行展開，描述其內部的模塊者蠕。
這個圖主要是給內部開發(fā)人員看的窃祝，怎么去做代碼的組織和構建。其用途有：
描述了系統(tǒng)由哪些組件/服務組成
厘清了組件之間的關系和依賴
為軟件開發(fā)如何分解交付提供了框架
類圖(Code/Class Diagram)
這個圖很顯然是給技術人員看的踱侣，比較常見锌杀，就不詳細介紹了甩栈。
案例分享
下面是內部的一個實時數(shù)據(jù)工具的架構圖。作為一個應該自描述的架構圖糕再，這里不多做解釋了。如果有看不明白的玉转，那肯定是還畫的不夠好突想。
畫好架構圖可能有許多方法論，本篇主要介紹了 C4 這種方法究抓，C4 的理論也是不斷進化的猾担。
但不論是哪種畫圖方法論，我們回到畫圖初衷刺下，是為了更好的交流绑嘹，我們在畫的過程中不必被條條框框所限制。簡而言之橘茉，畫之前想好：畫圖給誰看工腋，看什么，怎么樣不解釋就看懂畅卓。
畫圖的工具有：
Keynote
Xmind
EdrawMax
Visio
OmniGraffle
Process On
文中物理視圖 Download 地址：
