作者：三畫(huà)
簡(jiǎn)介：阿里巴巴技術(shù)專家抡秆，梓敬琅轧、鵬升和余樂(lè)對(duì)此文亦有貢獻(xiàn)乍桂。三畫(huà)曾多年從事工作流引擎研發(fā)工作睹酌，現(xiàn)專注于高并發(fā)移動(dòng)互聯(lián)網(wǎng)應(yīng)用的架構(gòu)和開(kāi)發(fā)憋沿。
編輯：陶家龍辐啄、孫淑娟
出處：轉(zhuǎn)載自微信公眾號(hào)：阿里技術(shù)（ID：ali_tech）
技術(shù)傳播的價(jià)值壶辜，不僅僅體現(xiàn)在通過(guò)商業(yè)化產(chǎn)品和開(kāi)源項(xiàng)目來(lái)縮短我們構(gòu)建應(yīng)用的路徑砸民。
加速業(yè)務(wù)的上線速率，也體現(xiàn)在優(yōu)秀工程師的工作效率提升尝艘、產(chǎn)品性能優(yōu)化和用戶體驗(yàn)改善等經(jīng)驗(yàn)方面的分享背亥，以提高我們的專業(yè)能力隘梨。
接下來(lái)舷嗡，阿里巴巴技術(shù)專家三畫(huà)，將分享自己和團(tuán)隊(duì)在畫(huà)好架構(gòu)圖方面的理念和經(jīng)驗(yàn)捻脖，希望對(duì)你有所幫助可婶。
當(dāng)我們想用一張或幾張圖來(lái)描述我們的系統(tǒng)時(shí)矛渴，是不是經(jīng)常遇到以下情況：
對(duì)著畫(huà)布無(wú)從下手具温、刪了又來(lái)筐赔？
如何用一張圖描述我的系統(tǒng)达皿，并且讓產(chǎn)品峦椰、運(yùn)營(yíng)汰规、開(kāi)發(fā)都能看明白控轿？
畫(huà)了一半的圖還不清楚受眾是誰(shuí)茬射？
畫(huà)出來(lái)的圖到底是產(chǎn)品圖功能圖還是技術(shù)圖又或是大雜燴？
圖上的框框有點(diǎn)少是不是要找點(diǎn)兒框框加進(jìn)來(lái)钟病？
布局怎么畫(huà)都不滿意…
如果有同樣的困惑肠阱，本文將介紹一種畫(huà)圖的方法論，來(lái)讓架構(gòu)圖更清晰衅金。
先厘清一些基礎(chǔ)概念
什么是架構(gòu)氮唯？
架構(gòu)就是對(duì)系統(tǒng)中的實(shí)體以及實(shí)體之間的關(guān)系所進(jìn)行的抽象描述惩琉，是一系列的決策。
架構(gòu)是結(jié)構(gòu)和愿景良蒸。系統(tǒng)架構(gòu)是概念的體現(xiàn)诚啃，是對(duì)物/信息的功能與形式元素之間的對(duì)應(yīng)情況所做的分配，是對(duì)元素之間的關(guān)系以及元素同周邊環(huán)境之間的關(guān)系所做的定義仔燕。
做好架構(gòu)是個(gè)復(fù)雜的任務(wù)晰搀，也是個(gè)很大的話題外恕，本篇就不做深入了乡翅。有了架構(gòu)之后，就需要讓干系人理解悔橄、遵循相關(guān)決策癣疟。
什么是架構(gòu)圖？
系統(tǒng)架構(gòu)圖是為了抽象地表示軟件系統(tǒng)的整體輪廓和各個(gè)組件之間的相互關(guān)系和約束邊界邪蛔，以及軟件系統(tǒng)的物理部署和軟件系統(tǒng)的演進(jìn)方向的整體視圖店溢。
架構(gòu)圖的作用
一圖勝千言床牧。要讓干系人理解戈咳、遵循架構(gòu)決策著蛙，就需要把架構(gòu)信息傳遞出去踏堡。架構(gòu)圖就是一個(gè)很好的載體顷蟆。
那么帐偎，畫(huà)架構(gòu)圖是為了：
解決溝通障礙
達(dá)成共識(shí)
減少歧義
架構(gòu)圖分類(lèi)
搜集了很多資料削樊，分類(lèi)有很多甸箱，有一種比較流行的是 4+1 視圖摇肌，分別為場(chǎng)景視圖、邏輯視圖树碱、物理視圖成榜、處理流程視圖和開(kāi)發(fā)視圖赎婚。
①場(chǎng)景視圖
場(chǎng)景視圖用于描述系統(tǒng)的參與者與功能用例間的關(guān)系挣输，反映系統(tǒng)的最終需求和交互設(shè)計(jì)撩嚼，通常由用例圖表示。
②邏輯視圖
邏輯視圖用于描述系統(tǒng)軟件功能拆解后的組件關(guān)系逻族，組件約束和邊界聘鳞，反映系統(tǒng)整體組成與系統(tǒng)如何構(gòu)建的過(guò)程搁痛，通常由 UML 的組件圖和類(lèi)圖來(lái)表示。
③物理視圖
物理視圖用于描述系統(tǒng)軟件到物理硬件的映射關(guān)系彻况，反映出系統(tǒng)的組件是如何部署到一組可計(jì)算機(jī)器節(jié)點(diǎn)上纽甘，用于指導(dǎo)軟件系統(tǒng)的部署實(shí)施過(guò)程悍赢。
**④處理流程視圖 **
處理流程視圖用于描述系統(tǒng)軟件組件之間的通信時(shí)序皮胡，數(shù)據(jù)的輸入輸出，反映系統(tǒng)的功能流程與數(shù)據(jù)流程甩栈，通常由時(shí)序圖和流程圖表示量没。
⑤開(kāi)發(fā)視圖
開(kāi)發(fā)視圖用于描述系統(tǒng)的模塊劃分和組成允蜈，以及細(xì)化到內(nèi)部包的組成設(shè)計(jì)，服務(wù)于開(kāi)發(fā)人員蒿柳，反映系統(tǒng)開(kāi)發(fā)實(shí)施過(guò)程饶套。
以上 5 種架構(gòu)視圖從不同角度表示一個(gè)軟件系統(tǒng)的不同特征，組合到一起作為架構(gòu)藍(lán)圖描述系統(tǒng)架構(gòu)垒探。
怎樣的架構(gòu)圖是好的架構(gòu)圖
上面的分類(lèi)是前人的經(jīng)驗(yàn)總結(jié)妓蛮，圖也是從網(wǎng)上摘來(lái)的，那么這些圖畫(huà)的好不好呢圾叼？是不是我們要依葫蘆畫(huà)瓢去畫(huà)這樣一些圖蛤克？
先不去管這些圖好不好，我們通過(guò)對(duì)這些圖的分類(lèi)以及作用夷蚊，思考了一下，總結(jié)下來(lái)一膨。
我們認(rèn)為申眼，在畫(huà)出一個(gè)好的架構(gòu)圖之前姻氨， 首先應(yīng)該要明確其受眾功戚，再想清楚要給他們傳遞什么信息 。
所以，不要為了畫(huà)一個(gè)物理視圖去畫(huà)物理視圖轧铁，為了畫(huà)一個(gè)邏輯視圖去畫(huà)邏輯視圖救斑，而應(yīng)該根據(jù)受眾的不同鄙煤，傳遞的信息的不同，用圖準(zhǔn)確地表達(dá)出來(lái)，最后的圖可能就是在這樣一些分類(lèi)里。
那么，畫(huà)出的圖好不好的一個(gè)直接標(biāo)準(zhǔn)就是：受眾有沒(méi)有準(zhǔn)確接收到想傳遞的信息幸斥。
明確這兩點(diǎn)之后经窖，從受眾角度來(lái)說(shuō)棉钧，一個(gè)好的架構(gòu)圖是不需要解釋的万栅，它應(yīng)該是自描述的，并且要具備一致性和足夠的準(zhǔn)確性，能夠與代碼相呼應(yīng)。
畫(huà)架構(gòu)圖遇到的常見(jiàn)問(wèn)題
①方框代表什么？
為什么適用方框而不是圓形烦磁，它有什么特殊的含義嗎院溺？隨意使用方框或者其他形狀可能會(huì)引起混淆聋溜。
②虛線、實(shí)線什么意思？****箭頭什么意思老客？****顏色什么意思？
隨意使用線條或者箭頭可能會(huì)引起誤會(huì)撤蚊。
③運(yùn)行時(shí)與編譯時(shí)沖突？****層級(jí)沖突拧烦？
架構(gòu)是一項(xiàng)復(fù)雜的工作硅蹦，只使用單個(gè)圖表來(lái)表示架構(gòu)很容易造成莫名其妙的語(yǔ)義混亂皆愉。
本文推薦的畫(huà)圖方法
C4 模型使用容器（應(yīng)用程序歹苦、數(shù)據(jù)存儲(chǔ)、微服務(wù)等）悠砚、組件和代碼來(lái)描述一個(gè)軟件系統(tǒng)的靜態(tài)結(jié)構(gòu)别智。
這幾種圖比較容易畫(huà)，也給出了畫(huà)圖要點(diǎn)，但最關(guān)鍵的是终蒂，我們認(rèn)為，它明確指出了每種圖可能的受眾以及意義葱弟。
下面的案例來(lái)自 C4 官網(wǎng)蝌麸，然后加上了一些我們的理解盗冷，來(lái)看看如何更好的表達(dá)軟件架構(gòu)咒程。
①語(yǔ)境圖(System Context Diagram)
這是一個(gè)想象的待建設(shè)的互聯(lián)網(wǎng)銀行系統(tǒng)棺克，它使用外部的大型機(jī)銀行系統(tǒng)存取客戶賬戶芭商、交易信息勿侯，通過(guò)外部電郵系統(tǒng)給客戶發(fā)郵件。
可以看到睦焕，非常簡(jiǎn)單偎窘、清晰，相信不需要解釋纸俭，都看的明白，里面包含了需要建設(shè)的系統(tǒng)本身祭玉，系統(tǒng)的客戶多矮，和這個(gè)系統(tǒng)有交互的周邊系統(tǒng)格粪。
這樣一個(gè)簡(jiǎn)單的圖，可以告訴我們兽叮，要構(gòu)建的系統(tǒng)是什么；它的用戶是誰(shuí)材彪，誰(shuí)會(huì)用它缓升，它要如何融入已有的 IT 環(huán)境。
這個(gè)圖的受眾可以是開(kāi)發(fā)團(tuán)隊(duì)的內(nèi)部人員、外部的技術(shù)或非技術(shù)人員蛀缝。即：
構(gòu)建的系統(tǒng)是什么
誰(shuí)會(huì)用它
如何融入已有的 IT 環(huán)境
怎么畫(huà)？中間是自己的系統(tǒng)，周?chē)怯脩艉推渌c之相互作用的系統(tǒng)捎废。這個(gè)圖的關(guān)鍵就是梳理清楚待建設(shè)系統(tǒng)的用戶和高層次的依賴，梳理清楚了畫(huà)下來(lái)只需要幾分鐘時(shí)間辐益。
②容器圖(Container Diagram)
容器圖是把語(yǔ)境圖里待建設(shè)的系統(tǒng)做了一個(gè)展開(kāi)断傲。
上圖中，除了用戶和外圍系統(tǒng)荷腊，要建設(shè)的系統(tǒng)包括一個(gè)基于 Java\Spring MVC的 Web 應(yīng)用提供系統(tǒng)的功能入口艳悔，基于 Xamarin 架構(gòu)的手機(jī) App 提供手機(jī)端的功能入口，一個(gè)基于 Java 的 API 應(yīng)用提供服務(wù)女仰，一個(gè) MySQL 數(shù)據(jù)庫(kù)用于存儲(chǔ)猜年，各個(gè)應(yīng)用之間的交互都在箭頭線上寫(xiě)明了。
看這張圖的時(shí)候疾忍，不會(huì)去關(guān)注到圖中是直角方框還是圓角方框乔外，不會(huì)關(guān)注是實(shí)線箭頭還是虛線箭頭，甚至箭頭的指向也沒(méi)有引起太多注意一罩。
我們有許多的畫(huà)圖方式杨幼，都對(duì)框、線的含義做了定義聂渊，這就需要畫(huà)圖的人和看圖的人都清晰的理解這些定義差购，才能讀全圖里的信息。
而現(xiàn)實(shí)是汉嗽，這往往是非常高的一個(gè)要求欲逃，所以，很多圖只能看個(gè)大概的含義饼暑。
這個(gè)圖的受眾可以是團(tuán)隊(duì)內(nèi)部或外部的開(kāi)發(fā)人員稳析，也可以是運(yùn)維人員洗做。用途可以羅列為：
展現(xiàn)了軟件系統(tǒng)的整體形態(tài)。
體現(xiàn)了高層次的技術(shù)決策彰居。
系統(tǒng)中的職責(zé)是如何分布的诚纸，容器間是如何交互的。
告訴開(kāi)發(fā)者在哪里寫(xiě)代碼陈惰。
怎么畫(huà)畦徘？用一個(gè)框圖來(lái)表示，內(nèi)部可能包括名稱奴潘、技術(shù)選擇旧烧、職責(zé)影钉，以及這些框圖之間的交互画髓，如果涉及外部系統(tǒng)，最好明確邊界平委。
③組件圖(Component Diagram)
組件圖是把某個(gè)容器進(jìn)行展開(kāi)奈虾，描述其內(nèi)部的模塊。
這個(gè)圖主要是給內(nèi)部開(kāi)發(fā)人員看的廉赔，怎么去做代碼的組織和構(gòu)建肉微。其用途有：
描述了系統(tǒng)由哪些組件/服務(wù)組成
厘清了組件之間的關(guān)系和依賴
為軟件開(kāi)發(fā)如何分解交付提供了框架
④類(lèi)圖(Code/Class Diagram)
這個(gè)圖很顯然是給技術(shù)人員看的，比較常見(jiàn)蜡塌，就不詳細(xì)介紹了碉纳。
案例分享
下面是內(nèi)部的一個(gè)實(shí)時(shí)數(shù)據(jù)工具的架構(gòu)圖。作為一個(gè)應(yīng)該自描述的架構(gòu)圖馏艾，這里不多做解釋了劳曹。如果有看不明白的，那肯定是還畫(huà)的不夠好琅摩。
畫(huà)好架構(gòu)圖可能有許多方法論铁孵，本篇主要介紹了 C4 這種方法，C4 的理論也是不斷進(jìn)化的房资。
但不論是哪種畫(huà)圖方法論蜕劝，我們回到畫(huà)圖初衷，是為了更好的交流轰异，我們?cè)诋?huà)的過(guò)程中不必被條條框框所限制岖沛。簡(jiǎn)而言之，畫(huà)之前想好：畫(huà)圖給誰(shuí)看搭独，看什么婴削，怎么樣不解釋就看懂。
畫(huà)圖的工具有：
Keynote
Xmind
EdrawMax
Visio
OmniGraffle
Process On
…
文中物理視圖 Download 地址：
