作為一個程式設計師，假如讓你繪製當前正在開發的專案的架構圖，你會怎麼繪製？

背景

先來同步一個理念。架構圖的作用是什麼？

我回答一下：

提供了一個簡單的方法給到開發團隊（從開發工程師，測試工程師，架構師，測試，專案經歷，產品經理，互動設計師，使用者）能夠更簡單的描述和溝通軟體架構，讓團隊每個人腦子裡的架構視覺化，更容易理解，形成統一；

歸納一下： 畫個圖讓團隊更好好的理解軟體架構，並統一認知；

下面，我簡單思考一下作為程式設計師應該如何繪製當前正在開發專案的架構圖。

問題回答where are we?現狀我是程式設計師，不知道怎麼繪製專案的架構圖where are we go?目的可繪製方便平級，上級之間溝通交流的架構圖how can we go there?實現路徑C4PlantUML實現路徑C4模型

一種架構設計的方法論，忽略不在同一個抽象成績的細節，從而可以更好的表達和視覺化。

可以類比地圖，地圖分4個級別，國家，省，市，街道；而C4模型也分4個層級，Context系統上下文，Container容器，Component元件，Code程式碼；

加上3種補充檢視，即系統全景圖，動態圖，部署圖，即可完整的描述一個專案的軟體架構；

佈局

分4個

佈局說明語法從上到下LAYOUT_TOP_DOWN從左到右LAYOUT_RIGHT_LEFT自由佈局LAYOUT_WITH_LEGEND素描佈局LAYOUT_AS_SKETCH

可自定義更多的佈局，原始碼是基於plantUML語法；

Context上下文

元素如下：

元素名稱函式角色Person外部角色Person_Ext關注的軟體系統System外部軟體系統System_Ext系統資料庫SystemDb系統外部資料庫SystemDb_Ext系統虛框System_Boundry企業虛框Enterprise_Boundry

可以使用plantUML繪製系統全景圖，系統物理部署圖；

下面是一個例子：

@startuml "enterprise"!include ../C4_Context.pumlLAYOUT_TOP_DOWNLAYOUT_WITH_LEGEND()Person(customer, "客戶", "一種限制工具的客戶")Enterprise_Boundary(c0, "限制工具") { Person(csa, "客戶服務代理", "處理客戶詢問") System(ecommerce, "電子商務系統", "允許客戶通過widgets.com站點線上購買工具") System(fulfilment, "履行系統", "負責處理和傳遞客戶訂單")}System(taxamo, "Taxamo", "計算本地稅務並扮演Braintree支付前臺")System(braintree, "Braintree支付", "處理信用卡支付購買工具")System(post, "澤西郵報", "計算全世界的包裹郵費")Rel_R(customer, csa, "諮詢", "電話")Rel_R(customer, ecommerce, "下工具訂單")Rel(csa, ecommerce, "查詢訂單資訊")Rel_R(ecommerce, fulfilment, "傳送訂單資訊")Rel_D(fulfilment, post, "獲取物流費用")Rel_D(ecommerce, taxamo, "代理信用卡處理")Rel_L(taxamo, braintree, "使用信用卡")Lay_D(customer, braintree)@enduml

Container容器

元素如下：

@startuml!include ../C4_Container.pumlLAYOUT_TOP_DOWNLAYOUT_WITH_LEGEND()title 網銀系統容器圖Person(customer, 客戶, "銀行客戶有自己的私人銀行賬號")System_Boundary(c1, "網銀") { Container(web_app, "Web 應用", "Java, Spring MVC", "傳遞靜態內容和網銀SPA") Container(spa, "單頁應用", "JavaScript, Angular", "通過瀏覽器對使用者提供所有的網銀功能") Container(mobile_app, "手機應用", "C#, Xamarin", "通過手機裝置提供有限的網銀功能") ContainerDb(database, "資料庫", "SQL 資料庫", "儲存使用者的註冊資訊，隨機認證密碼，訪問日誌等") Container(backend_api, "API應用", "Java, Docker容器", "通過API提供網銀功能")}System_Ext(email_system, "郵件系統", "網路軟體交換系統")System_Ext(banking_system, "Mainframe銀行系統", "儲存所有的核心客戶，賬號，事務銀行資訊")Rel(customer, web_app, "使用", "HTTPS")Rel(customer, spa, "使用", "HTTPS")Rel(customer, mobile_app, "使用")Rel_Neighbor(web_app, spa, "傳輸")Rel(spa, backend_api, "使用", "非同步, JSON/HTTPS")Rel(mobile_app, backend_api, "使用", "非同步, JSON/HTTPS")Rel_Back_Neighbor(database, backend_api, "讀寫", "同步, JDBC")Rel_Back(customer, email_system, "傳送郵件到")Rel_Back(email_system, backend_api, "傳送郵件", SMTP")Rel_Neighbor(backend_api, banking_system, "使用", "同步/非同步, XML/HTTPS")@enduml

Component元件

元素如下：

@startuml !include ../C4_Component.pumlLAYOUT_WITH_LEGEND()title 網銀系統元件圖 - API應用Container(spa, "單頁應用", "javascript 和 angular", "通過瀏覽器提供所有的網銀系統功能給到使用者.")Container(ma, "手機應用", "Xamarin", "通過手機裝置提供有限的網銀系統功能給使用者.")ContainerDb(db, "資料庫", "關係資料庫 Schema", "儲存使用者的註冊資訊, 隨機認證令牌, 訪問日誌等.")System_Ext(mbs, "Mainframe銀行系統", "儲存使用者，賬號，交易等所有的核心銀行資訊.")Container_Boundary(api, "API 應用") { Component(sign, "登入控制器", "MVC Rest 控制器", "允許使用者登入到網銀系統") Component(accounts, "賬戶彙總控制器", "MVC Rest 控制器", "提供使用者彙總的銀行賬號") Component(security, "安全元件", "Spring Bean", "提供登入，修改密碼等相關功能") Component(mbsfacade, "Mainframe 銀行系統 Facade", "Spring Bean", "一個mainframe 銀行系統 facade.") Rel(sign, security, "使用") Rel(accounts, mbsfacade, "使用") Rel(security, db, "讀寫", "JDBC") Rel(mbsfacade, mbs, "使用", "XML/HTTPS")}Rel(spa, sign, "使用", "JSON/HTTPS")Rel(spa, accounts, "使用", "JSON/HTTPS")Rel(ma, sign, "使用", "JSON/HTTPS")Rel(ma, accounts, "使用", "JSON/HTTPS")@enduml

Code程式碼

即通用的，元素如下：

元素名稱函式虛框Boundry從上到下關係Rel反向關係Rel_Back從上到下關係Rel_U從下到上關係Rel_D從左到右關係Rel_L從右到左關係Rel_R

程式碼級別可使用PlantUML繪製時序圖，流程圖，類圖描述具體介面或者功能的實現細節；

這塊是PlantUML的基礎知識了，不詳細展開，自行查閱資料即可。

@startumlactor 使用者 as userparticipant 瀏覽器 as browserparticipant 前端 as frontparticipant 登入服務 as loginServerdatabase 資料庫 as dbuser -> browser: 開啟登入頁面browser->front:載入資源,輸入賬號密碼front->loginServer:ajax請求loginServer->db:按照賬號查詢，校驗密碼return: 返回結果@enduml

C4PlantUML

它是兩個東西的合體，提供了一種簡單的方法來描述和溝通軟體架構。

plantuml被創造用來允許你繪製UML圖，使用簡單和人類容易閱讀的文字描述，因為它沒有阻止你繪製反常的圖，它只是一個繪圖工具而不是一個建模工具；他是使用最多的文字繪圖工具，被wiki,論壇，文字編輯器和IDE強烈支援，可以使用不同的程式語言或者文件來生成；

C4模型對軟體架構來說是一個抽象第一的繪圖方式。基於抽象，可以反映出軟體架構師和開發者是如何思考和構建軟體的。少量的抽象和繪圖型別是的C4模型很容易學習和使用；C4代表著context,containers,components，code;這一系列水平層級的圖，你可以使用它來從不同的尺度向不同的聽眾描述你的軟體架構。

C4模型和plantUML 分工如下：

context 上下文圖container 容器圖component 元件圖sequence 時序圖usecase 用例圖class 類圖activity 活動圖state 狀態圖object 物件圖deployment 部署圖timing 定時圖

繪圖步驟：

1.建立模型圖名，按照上面的命名規則， xxx_專案名稱.puml;

2.引入相對路徑下的 path/C4_Component.puml

3.使用內建的函式，繪圖；

小結

如果看完之後你只能記住一句話：C4PlantUML提供了一個繪圖方式讓你輕鬆的描述和表達軟體架構；

我會持續分享Java軟體程式設計知識和程式設計師發展職業之路！原創不易，關注誠可貴，轉發價更高！轉載請註明出處，讓我們互通有無，共同進步，歡迎溝通交流。