PlantUML

Posted on Views:

PlantUML

PlantUML 是一個可以透過直觀的文字描述產生對應 UML 的模型生成工具，官方網站已經提供了詳細的範例以及說明，相關語法其實不用一開始就先死背，需要時至網站查詢即可，上手難度不大，目前提供下列 UML 模型：

模型名稱 範例
循序圖 (Sequence Diagram) img
使用案例圖 (Use Case Diagram) img
類別圖 (Class Diagram) img
活動圖 (Activity Diagram) img
元件圖 (Component Diagram) img
狀態圖 (State Diagram) img
物件圖 (Object Diagram) img
佈署圖 (Deployment Diagram) img
時序圖 (Timing Diagram) img

安裝擴充功能：PlantUML

依上方擴充功能安裝方式安裝 PlantUML。
img
建立一個副檔名為 .puml 的新檔(demo.puml)，並至PlantUML 官方網站將一個範例貼入。
img
img
透過熱鍵 Alt + D 開啟檢視畫面，可以發現還需要安裝 Java。
img
亦可透過功能選單來開啟檢視視窗。
img

安裝 Java Runtime Environment

我們至 官方網站 下載並安裝 JRE(Java Runtime Environment)
img
安裝後重新開啟 VS Code，又發現還要再安裝 Graphviz。
img

安裝 Graphviz

至官方下載頁面下載並安裝 Graphviz。
img
重新開啟 VS Code，UML 模型圖示已經可以出現了。
img

更新 plantuml.jar (選擇性)

開啟擴充功能 PlantUML 資料夾(使用者資料夾.vscode\extensions\jebbs.plantuml-x.x.x) 可以發現此擴充功能也是透過官方元件 - plantuml.jar 來繪製圖模型。
img
執行程式並查看關於(About)頁面可以發現目前版本為 1.2017.15。
img
開啟 PlantUML 官方下載頁面 可以看到目前有新的版本 1.2017.19，下載 plantuml.jar 並覆蓋掉舊版本即可升級至新版本。
img

另一種方式是透過 使用者設定檔 指定所要使用的 plantuml.jar 位置。
img

範例

我們也可以加入 markdown 的表格語法。
img
不可否認系統產生的模型在排版上可讀性會隨著邏輯複雜度而降低，甚至難以閱讀，像下圖的付款方式應該是”多選一”。
img
筆者選擇放棄 UML 的標準圖示含意，改用 並行分流(concurrent flow) 來提升可讀性。
img