(MarkDown)Visual Studio Code で PlantUML を導入する手順 - tsukimisoba/Blog GitHub Wiki

2025/05/28 記載
Visual Studio Code で PlantUML を導入する手順を、説明します。

1. PlantUML 拡張機能のインストール

まずは、VS Code に PlantUML の拡張機能を追加します：

  1. VS Code の拡張機能 (Ctrl+Shift+X) を開く
  2. PlantUML を検索
  3. PlantUML 拡張機能（jebbs.PlantUML）をインストール

2. Java のインストール（必要な場合）

PlantUML の動作には Java が必要です。インストールされていない場合は：

  1. AdoptOpenJDK から最新の JDK をダウンロード
  2. 環境変数 JAVA_HOME を設定し、動作確認: 
    java -version

3. Graphviz のインストール（オプション）

PlantUML でより精度の高い図を生成するためには Graphviz のインストールが推奨されます：

  1. Graphviz からダウンロード
  2. 環境変数 GRAPHVIZ_DOT に dot.exe のパスを設定 
    GRAPHVIZ_DOT=C:\Program Files\Graphviz\bin\dot.exe

4. VS Code の設定 (settings.json)

PlantUML の動作を最適化するため、VS Code の設定を変更します：

{
  "plantuml.render": "PlantUMLServer",
  "plantuml.server": "http://www.plantuml.com/plantuml",
  "plantuml.previewMode": "svg"
}
  • PlantUMLServer を使うとローカル環境に Java を入れなくても動作可能
  • SVG 形式でプレビューを表示

5. PlantUML ファイルの作成とプレビュー

  1. .puml 拡張子のファイルを作成（例：diagram.puml）
  2. 以下のコードを記述： 
    @startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
  3. Alt+D または PlantUML: Preview Current Diagram コマンドでプレビュー

6. 図のエクスポート

  • Ctrl+Shift+P で PlantUML: Export Current Diagram を実行すると PNG, SVG などにエクスポート可能

7. より高度な活用

  • GitHub Pages に UML 図をホスティング
  • PlantUML インライン記述（Markdown + PlantUML）
  • テンプレート管理 で再利用可能な設計図作成