(MarkDown)Visual Studio Code で PlantUML を導入する手順 - tsukimisoba/Blog GitHub Wiki
2025/05/28 記載
Visual Studio Code で PlantUML を導入する手順を、説明します。
1. PlantUML 拡張機能のインストール
まずは、VS Code に PlantUML の拡張機能を追加します:
- VS Code の拡張機能 (
Ctrl+Shift+X
) を開く PlantUML
を検索PlantUML
拡張機能(jebbs.PlantUML)をインストール
2. Java のインストール(必要な場合)
PlantUML の動作には Java が必要です。インストールされていない場合は:
- AdoptOpenJDK から最新の JDK をダウンロード
- 環境変数
JAVA_HOME
を設定し、動作確認:java -version
3. Graphviz のインストール(オプション)
PlantUML でより精度の高い図を生成するためには Graphviz のインストールが推奨されます:
- Graphviz からダウンロード
- 環境変数
GRAPHVIZ_DOT
にdot.exe
のパスを設定GRAPHVIZ_DOT=C:\Program Files\Graphviz\bin\dot.exe
settings.json
)
4. VS Code の設定 (PlantUML の動作を最適化するため、VS Code の設定を変更します:
{
"plantuml.render": "PlantUMLServer",
"plantuml.server": "http://www.plantuml.com/plantuml",
"plantuml.previewMode": "svg"
}
- PlantUMLServer を使うとローカル環境に Java を入れなくても動作可能
- SVG 形式でプレビューを表示
5. PlantUML ファイルの作成とプレビュー
.puml
拡張子のファイルを作成(例:diagram.puml
)- 以下のコードを記述:
@startuml Alice -> Bob: Hello Bob --> Alice: Hi! @enduml
Alt+D
またはPlantUML: Preview Current Diagram
コマンドでプレビュー
6. 図のエクスポート
Ctrl+Shift+P
でPlantUML: Export Current Diagram
を実行すると PNG, SVG などにエクスポート可能
7. より高度な活用
- GitHub Pages に UML 図をホスティング
- PlantUML インライン記述(Markdown + PlantUML)
- テンプレート管理 で再利用可能な設計図作成