關於C4-Model
最近在看C4-Model,它的理念很實用,架構圖要明確面向人群,根據面向人群的不同,產出四幅圖來描述一個系統或者一個架構。System Context --> Container --> Component --> Code 四個層次。
具體每個層級的圖形用來描述什麼,可以參見這裡:
https://www.infoq.cn/article/C4-architecture-model
本文的關注點更小,不討論這些道的層面,而是描述怎麼做,也就是術的層面。
安裝vscode
其實直接使用plantUML也可以,不過plantUML的界面比較簡陋,功能也比較弱,而vscode中有plantUML的插件,使用起來更順手。
vscode的安裝很簡單,MAC下直接
https://code.visualstudio.com/Download下載dmg文件安裝到Application即可。
安裝vscode的plantUML&Graphviz插件
plantUML是一款可以通過文字、代碼畫UML圖的工具,不需要考慮態度配色、位置等因素,方便快速。而vscode上對應的插件功能類似。
Graphviz是一款圖形化預覽插件,plantUML默認只能渲染出時序圖,對於比較複雜的圖形,則需要Graphviz插件協助渲染。
直接在vscode的marketplace中搜索安裝,如下所示:
PS: 運行plantUML需要Java環境,請自行安裝jdk並配置環境變量。
如果未安裝Graphviz,在渲染的時候會報錯:
/opt/local/bin/dot File not exist.
配置C4-model對應的snippets
vscode有工作區的概念,也就是一個工作目錄。通過File-->open... 打開一個目錄,就會默認把這個目錄作為一個工作區。
在工作區中會默認讀取當前目錄下的一個隱藏子目錄 .vscode 來獲取當前工作區的設置,在這裡我們只自定義C4-Model的snippets(代碼片段),用於輔助畫圖時語句編寫。
首先從github上拉取C4-PlantUML項目源碼,如下
git clone https://github.com/RicardoNiepel/C4-PlantUML
可以看到其代碼結構:
我們需要的snippets文件就在這裡,直接複製這個目錄到工作區即可,比如我的工作區:
實操畫圖
當畫圖可以用代碼實現時,是不是覺得有點興奮,普通的UML圖形語法可以參考這裡
http://plantuml.com/zh/sitemap-language-specification
我這裡只針對C4-Model來簡單介紹下。
常見元素
在C4-Model中有幾個元素,都比較直觀:
Person:人員 System:系統,包含DB、Application、WebPage等 System_ext:外部系統 System_Boundary:系統邊界,在這個邊界中的都是系統的組成部分,裡面一般是Container級別的組件 Container:容器,不是Docker之類的容器,簡單點可以直接理解為System的組成部分,比如DB、Application等 ContainerDb:DB Container_Boundary:容器邊界,在這個邊界範圍內的都是容器的組成部分,裡面一般都是Component級別的數據 Component:組件,比如一個Controller,一個Service邏輯處理類,一個Domain等 Rel:連接線
還需要額外強調下,普通的畫圖工具,文件後綴需要保存為.uml,而c4的,需要保存為.puml。先保存為對應的後綴,snippets才會在後續的編寫過程中生效。
還有一些特殊的代碼用來指定圖的模式--注意後面要加上():
LAYOUT_WITH_LEGEND()
在include之後加上這行代碼,會在生成圖形的右下角生成如下內容:
LAYOUT_AS_SKETCH()
加上這個表示草稿,整個渲染生成的圖形都是草稿樣式,如下:
LAYOUT_TOP_DOWN
排列方向,顧名思義為從上到下排列,注意不需要加括號
LAYOUT_LEFT_RIGHT
排列方向,顧名思義為從左到右排列,注意不需要加括號
開始寫對應的code
@startuml !include /Users/alankim/gitspace/C4-PlantUML/C4_Container.puml 'LAYOUT_WITH_LEGEND() LAYOUT_AS_SKETCH() Person(user, "用戶") System_Boundary(item, "商品相關"){ System(itemCenter, "商品中心", "") System(priceCenter, "價格中心", "") System(InventoryCenter,"銷售庫存","") } System_Ext(orderPlatform, "訂單平臺") System_Ext(wmsStock,"wms庫存") System_Ext(buy,"導購平臺") Rel(wmsStock, InventoryCenter, "庫存上拋") Rel(buy,itemCenter,"商品信息查詢") Rel(user,orderPlatform,"提交訂單") Rel(buy,priceCenter,"價格查詢") Rel(orderPlatform,InventoryCenter,"扣減庫存") Rel(InventoryCenter, itemCenter, "查詢商品sku") Rel(priceCenter,itemCenter,"查詢商品sku") Rel(user,buy,"用戶瀏覽") @enduml
這個圖畫的比較複雜,基本上把大部分組件都用上了,對應生成的圖形如下: