[Unity] 用 Rider 的 PlantUML 畫出專案程式架構圖 (MacOS)

PlantUML 是一個基於 C#,能夠快速產生專案Class Diagram 的工具。VSCode 和 Rider 都有支援整合,本篇以 Rider 為範例來進行說明。

1. 安裝 GraphViz

PlantUML 是一個幫你畫 C# Class-Diagram 的開源專案
Rider 有支援它外掛,但因它需要使用到 GraphViz 這個套件
所以我們必須先裝 GraphViz
另外,雖然它叫 GraphViz,但實際上使用時是叫 dot
安裝好可以透過 which dot 來檢查是否安裝成功

brew install graphviz
which dot

2. 安裝 DotNet 和 PlantUML Generator

PlantUML Generator 是基於 DotNet 的工具
所以我們要先安裝 DotNet

brew install dotnet-sdk
dotnet --version

接著透過 DotNet Tool 來安裝 PlantUML Generator

dotnet new tool-manifest
dotnet tool install --global PlantUmlClassDiagramGenerator
將 DotNet Tool 加入環境變數
如果你也是用 zsh,就在 ~/.zshrc 這個檔案下加入下面這行
YOUR_USER_NAME 要改成你的使用者名稱
export PATH=$PATH:/Users/YOUR_USER_NAME/.dotnet/tools

重開 Terminal 或 source 一下 zshrc
接著確認一下 PlantUML Generator 是否安裝完成

source ~/.zshrc
which puml-gen

3. 在 Rider 下安裝 PlantUML Plugin

開啟 Preferences,切到 Plugins 頁面後搜尋 PlantUML
選擇第一個 PlantUML Integration 然後安裝

Rider PlantUML - 1

接著到 Languages & Frameworks 的 PlantUML 頁面下
找到 Graphviz dot executable 設定路徑
/opt/homebrew/bin/dot
SVG preview limit 可以設大一點避免在看 PUML 的時候模糊

Rider PlantUML - 2

4. 生成 Class Diagram

接下來我們就可以用 puml-gen 來生成 Class Diagram
puml-gen <INPUT_FOLDER> <OUTPUT_FOLDER>
以 Unity 專案為例,我們程式碼通常會放在 Assets/Scripts 下
我們在 Terminal 下先切到專案資料夾,再執行以下指令

-dir:表示輸入輸出是資料夾
-public:只有 public 成員會被輸出
-createAssociation:透過 Fields 和 Attributes 建立關聯

Github 頁面可以看到更多參數說明以及進一步使用方式:
https://github.com/pierre3/PlantUmlClassDiagramGenerator

puml-gen ./Assets/Scripts ./Assets/puml -dir -public -createAssociation 

5. 檢視 PlantUML

順利的話,你會在你設定的 Output 資料夾中,看到一堆 puml 檔
每個 Class 或 Interface 都會對應生成一個 puml
雙擊開啟檔案可以直接在 Rider 中 Preview
其中有個 include.puml 可以總覽所有的 Class Diagram
但只適用在小專案,大型專案肯定是會超過上限,且分開來看比較清楚

Rider PlantUML - 3

發佈留言