(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_DOTdot.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+PPlantUML: Export Current Diagram を実行すると PNG, SVG などにエクスポート可能

7. より高度な活用

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