[VisualStudio] PlantUML - 在 Visual Studio Code 繪製 UML 圖

前言
最近團隊主管開始要求團隊的文件，對於既有的系統的或是代碼，一直沒有比較清楚的架構圖或是說明的文件來定義各模組之間依賴關係，都是透過較資深的同事口耳相傳或是有看過代碼的人做傳承，但這種方式還是有比較大的風險，可能每個人理解的內容經過幾個世代口耳相傳後認知可能會有所差異，因此最近花了蠻多時間在整理既有系統相關文件，整理中可能會用架構圖循序圖、流程圖加上文字來說明。自己過去在畫循序圖可能會用 Visual Paradigm Online 或是 websequencediagrams 等工具，PlantUML 是 open source 免費且使用文字來定義互動的 UML 模型溝通方式，個人使用上覺得挺好用的，省掉了使用軟體畫圖調整位置的時間，今天這篇文章就來推坑這款好用的工具，若有問題歡迎提出來一起討論。

安裝
首先，官方說明文件有提到可以使用 PlantUml Demo Site 在線上 Render 需要的 UML 圖，如果希望在本機使用的話，可以從 Visual Studio Code 中的 Extensions 進行安裝， 在 Extensions 搜尋框輸入關鍵字 PlantUML，接著按下旁邊的 install 即可進行安裝的動作，

接著要在本機環境 Render，需要先安裝 Java，如果是 Mac 環境輸入以下指令

• brew cask install java
• brew install graphviz

如果在 Windows 請開啟 cmd.exe 輸入下列指令

• @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
• choco install plantuml

備註:如果電腦環境沒有安裝 Java 的話，可以到 這裡 下載 Java 安裝檔

透過以上步驟，即可完成 PlantUML 在 Visual Studio Code 的安裝。

使用
Sequence Diagram
安裝完畢之後可以開始使用 PlantUML，在 Visual Studio Code 新增 demo.puml 檔案，檔案內容參考 demo site 中提供的範例內文，貼在新增的檔案中

@startuml
Bob -> Alice : hello world
@enduml

按下右鍵選擇 Preview Current Diagram 選項，右邊就會出現所定義範例 UML Sequence Diagram

UseCase Diagram

@startuml

(First usecase)
(Another usecase) as (UC2)
usecase UC3
usecase (Last\nusecase) as UC4

@enduml

在 Visual Studio Code 中 Render 之後就會像下方的方式呈現

除了以上的 Demo 的兩種常見的 UML 圖之外，PlantUML 還另外支援以下 UML diagram

• Sequence diagram
• Usecase diagram
• Class diagram
• Activity diagram
• Component diagram
• State diagram

若對以上不同的 Diagram 有興趣的大大們，歡迎參考官網說明 自行試試看 :)

貼心功能
另外花了很多時間整理好 Diagram 之後，接下來要處理的是將辛苦畫好的圖片產出，PlantUML 提供一個很方便的功能自動將產出物 Export 到 url，個人覺得此功能十分貼心可以省下很多時間，這裡也就直接使用官方示意來說明
輸出圖片

產生 URL

感想
以上針對 PlantUML 套件做一些基本的介紹，整體使用上感覺算是挺方便的，也謝謝強者同事賈米斯推薦又學到一套好用的 Tool，如果有不清楚的地方歡迎一起討論，hope it helps !

參考
官方網站
marketplace
用筆記也可以管理專案(一)：PlantUML