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

關于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中搜索安裝，如下所示：

file

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

可以看到其代碼結構：

file

我們需要的snippets文件就在這里，直接復制這個目錄到工作區即可，比如我的工作區：

file

實操畫圖

當畫圖可以用代碼實現時，是不是覺得有點興奮，普通的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之后加上這行代碼，會在生成圖形的右下角生成如下內容：

file

LAYOUT_AS_SKETCH()

加上這個表示草稿，整個渲染生成的圖形都是草稿樣式，如下：

file

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

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

file

轉載自：
作者：AlanKim
鏈接：https://www.jianshu.com/p/0d1917cd04e3
來源：簡書
?

總結

以上是生活随笔為你收集整理的使用VSCode+PlantUML+C4-Model快速画架构图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。