使用VSCode+PlantUML+C4-Model快速画架构图
使用VSCode+PlantUML+C4-Model快速畫架構(gòu)圖
關(guān)于C4-Model
最近在看C4-Model，它的理念很實(shí)用，架構(gòu)圖要明確面向人群，根據(jù)面向人群的不同，產(chǎn)出四幅圖來(lái)描述一個(gè)系統(tǒng)或者一個(gè)架構(gòu)。System Context --> Container --> Component --> Code 四個(gè)層次。
層級(jí)
具體每個(gè)層級(jí)的圖形用來(lái)描述什么，可以參見(jiàn)這里：https://www.infoq.cn/article/C4-architecture-model
本文的關(guān)注點(diǎn)更小，不討論這些道的層面，而是描述怎么做，也就是術(shù)的層面。
安裝vscode
其實(shí)直接使用plantUML也可以，不過(guò)plantUML的界面比較簡(jiǎn)陋，功能也比較弱，而vscode中有plantUML的插件，使用起來(lái)更順手。
vscode的安裝很簡(jiǎn)單，MAC下直接https://code.visualstudio.com/Download下載dmg文件安裝到Application即可。
安裝vscode的plantUML&Graphviz插件
plantUML是一款可以通過(guò)文字、代碼畫UML圖的工具，不需要考慮態(tài)度配色、位置等因素，方便快速。而vscode上對(duì)應(yīng)的插件功能類似。
Graphviz是一款圖形化預(yù)覽插件，plantUML默認(rèn)只能渲染出時(shí)序圖，對(duì)于比較復(fù)雜的圖形，則需要Graphviz插件協(xié)助渲染。
直接在vscode的marketplace中搜索安裝，如下所示：
file
PS: 運(yùn)行plantUML需要Java環(huán)境，請(qǐng)自行安裝jdk并配置環(huán)境變量。
如果未安裝Graphviz，在渲染的時(shí)候會(huì)報(bào)錯(cuò)：
?
/opt/local/bin/dot File not exist.配置C4-model對(duì)應(yīng)的snippets
vscode有工作區(qū)的概念，也就是一個(gè)工作目錄。通過(guò)File-->open... 打開(kāi)一個(gè)目錄，就會(huì)默認(rèn)把這個(gè)目錄作為一個(gè)工作區(qū)。
在工作區(qū)中會(huì)默認(rèn)讀取當(dāng)前目錄下的一個(gè)隱藏子目錄 .vscode 來(lái)獲取當(dāng)前工作區(qū)的設(shè)置，在這里我們只自定義C4-Model的snippets(代碼片段)，用于輔助畫圖時(shí)語(yǔ)句編寫。
首先從github上拉取C4-PlantUML項(xiàng)目源碼，如下
?
git clone https://github.com/RicardoNiepel/C4-PlantUML可以看到其代碼結(jié)構(gòu)：
file
我們需要的snippets文件就在這里，直接復(fù)制這個(gè)目錄到工作區(qū)即可，比如我的工作區(qū)：
file
實(shí)操畫圖
當(dāng)畫圖可以用代碼實(shí)現(xiàn)時(shí)，是不是覺(jué)得有點(diǎn)興奮，普通的UML圖形語(yǔ)法可以參考這里http://plantuml.com/zh/sitemap-language-specification
我這里只針對(duì)C4-Model來(lái)簡(jiǎn)單介紹下。
常見(jiàn)元素
在C4-Model中有幾個(gè)元素，都比較直觀：
?
Person:人員 System:系統(tǒng)，包含DB、Application、WebPage等 System_ext:外部系統(tǒng) System_Boundary:系統(tǒng)邊界，在這個(gè)邊界中的都是系統(tǒng)的組成部分，里面一般是Container級(jí)別的組件 Container:容器，不是Docker之類的容器，簡(jiǎn)單點(diǎn)可以直接理解為System的組成部分，比如DB、Application等 ContainerDb:DB Container_Boundary:容器邊界，在這個(gè)邊界范圍內(nèi)的都是容器的組成部分，里面一般都是Component級(jí)別的數(shù)據(jù) Component:組件，比如一個(gè)Controller，一個(gè)Service邏輯處理類，一個(gè)Domain等 Rel:連接線還需要額外強(qiáng)調(diào)下，普通的畫圖工具，文件后綴需要保存為.uml，而c4的，需要保存為.puml。先保存為對(duì)應(yīng)的后綴，snippets才會(huì)在后續(xù)的編寫過(guò)程中生效。
還有一些特殊的代碼用來(lái)指定圖的模式--注意后面要加上()：
LAYOUT_WITH_LEGEND()
在include之后加上這行代碼，會(huì)在生成圖形的右下角生成如下內(nèi)容：
file
LAYOUT_AS_SKETCH()
加上這個(gè)表示草稿，整個(gè)渲染生成的圖形都是草稿樣式，如下：
file
LAYOUT_TOP_DOWN
排列方向，顧名思義為從上到下排列，注意不需要加括號(hào)
LAYOUT_LEFT_RIGHT
排列方向，顧名思義為從左到右排列，注意不需要加括號(hào)
開(kāi)始寫對(duì)應(yīng)的code
?
@startuml !include /Users/alankim/gitspace/C4-PlantUML/C4_Container.puml'LAYOUT_WITH_LEGEND() LAYOUT_AS_SKETCH()Person(user, "用戶")System_Boundary(item, "商品相關(guān)"){System(itemCenter, "商品中心", "")System(priceCenter, "價(jià)格中心", "")System(InventoryCenter,"銷售庫(kù)存","") }System_Ext(orderPlatform, "訂單平臺(tái)") System_Ext(wmsStock,"wms庫(kù)存") System_Ext(buy,"導(dǎo)購(gòu)平臺(tái)")Rel(wmsStock, InventoryCenter, "庫(kù)存上拋") Rel(buy,itemCenter,"商品信息查詢") Rel(user,orderPlatform,"提交訂單") Rel(buy,priceCenter,"價(jià)格查詢") Rel(orderPlatform,InventoryCenter,"扣減庫(kù)存") Rel(InventoryCenter, itemCenter, "查詢商品sku") Rel(priceCenter,itemCenter,"查詢商品sku") Rel(user,buy,"用戶瀏覽")@enduml這個(gè)圖畫的比較復(fù)雜，基本上把大部分組件都用上了，對(duì)應(yīng)生成的圖形如下：
file
轉(zhuǎn)載自：
作者：AlanKim
鏈接：https://www.jianshu.com/p/0d1917cd04e3
來(lái)源：簡(jiǎn)書(shū)
?
總結(jié)
以上是生活随笔為你收集整理的使用VSCode+PlantUML+C4-Model快速画架构图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 循环神经网络以及 LSTM 及其变体
- 下一篇： webpack打包原理