使用VSCode+PlantUML+C4-Model快速畫架構圖

使用VSCode+PlantUML+C4-Model快速畫架構圖

關於C4-Model

最近在看C4-Model，它的理念很實用，架構圖要明確面向人羣，根據面向人羣的不一樣，產出四幅圖來描述一個系統或者一個架構。System Context --> Container --> Component --> Code 四個層次。

具體每一個層級的圖形用來描述什麼，能夠參見這裏：www.infoq.cn/article/C4-…

本文的關注點更小，不討論這些道的層面，而是描述怎麼作，也就是術的層面。

安裝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
複製代碼

這個圖畫的比較複雜，基本上把大部分組件都用上了，對應生成的圖形以下：

本文由博客一文多發平臺 OpenWrite 發佈！