Visual Studio CodeでPlantUMLを使う方法

はじめに

このページではWindowsのVisual Studio CodeでPlantUML使う方法を紹介します。

前提条件

• Windows11 22H2 (OSビルド22621.1992)
• Visual Studio Code 1.80.2

Java JDKをダウンロード

Microsoft(https://learn.microsoft.com/ja-jp/java/openjdk/download)から以下のインストーラをダウンロードします。

• プラットフォーム：Windows
• アーキテクチャ：X64
• 種類：msi
  

Java JDKをインストール

インストーラを起動するとインストールが始まります。

デフォルトの設定で問題なければ全て次へをクリックしてインストールをします。

PCを再起動します。

Visual Studio Codeに拡張機能をインストール

Visual Studio Codeを起動して左側のメニューから拡張機能をクリックします。

検索欄にplantumlと入力して以下の拡張機能をインストールします。

以下のように表示されれば無事インストールは完了しています。

PlantUMLでER図を作成

Visual Studio Codeを起動して、拡張子.puのファイルを以下の作成します。

@startuml music
entity 曲 {
  + 曲ID [PK]
  --
  タイトル
  # アーティストID [FK]
  # アルバムID [FK]
}
entity アーティスト {
  + アーティストID [PK]
  アーティスト名
}
entity アルバム {
  + アルバムID [PK]
  アルバム名
}
曲 }o--|| アーティスト
曲 }|--o| アルバム
@enduml

Alt+Dでプレビューが表示されます。

おわりに

WindowsのVisual Studio CodeでPlantUML使う方法を紹介しました。