VSCodeでER図を描く：PlantUMLの設定から作成までのチュートリアル

この記事では、VSCodeとPlantUMLを使用して、ER図を作成する方法を説明します。

PlantUMLのインストール

VSCodeを起動し、拡張機能のタブから”PlantUML”を検索してインストールします。

また、PlantUMLはJavaを必要とするので、Javaのランタイム環境もインストールする必要があります。
Javaはこちらからダウンロードできます。

Javaのインストールができたら以下のコマンドでJavaのバージョンを確認します。

java -version

Graphvizのインストール

PlantUMLは、ER図を描画する際にGraphvizというツールを内部で使用します。

Windowsの場合

Graphvizの公式サイトからインストーラをダウンロードしてインストールします。

macOSの場合

Homebrewを使用して以下のコマンドでインストールします。

brew install graphviz

インストール後、コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行してGraphvizが正しくインストールされたことを確認します。

dot -version

VSCodeとPlantUMLでER図を作成する方法

エンティティの関係の表記法

それでは実際にER図を作成してみましょう。
エンティティの関係は以下のように書くことができます。

• Entity01 }|..|| Entity02：Entity01とEntity02の間には1対1の関係があります。}|..||の記号がこれを示しています。
• Entity03 }o..o| Entity04：Entity03とEntity04の間には0または1対1の関係があります。}o..o|の記号がこれを示しています。
• Entity05 ||--o{ Entity06：Entity05とEntity06の間には1対0または多の関係があります。||--o{の記号がこれを示しています。
• Entity07 |o--|| Entity08：Entity07とEntity08の間には0または1対1の関係があります。|o--||の記号がこれを示しています。

上記のコードにすると以下のようになります。

@startuml
Entity01 }|..|| Entity02
Entity03 }o..o| Entity04
Entity05 ||--o{ Entity06
Entity07 |o--|| Entity08
@enduml

上記のコードを.pumlの拡張子で保存します。
その後、VSCodeの画面右上の”Preview”ボタン（眼鏡のアイコン）をクリックすれば、PlantUMLのER図が表示されます。

ER図の表記法

例としてEntity01「Users」、Entity02を「Orders」テーブルとし、これらが1対多の関係を持つようなER図を作成してみます。

@startuml
entity "Users" as users {
  + id: integer [PK]
  ---
  name: varchar
}

entity "Orders" as orders {
  + id: integer [PK]
  ---
  user_id: integer [FK]
  date: date
}

users ||--o{ orders
@enduml

Usersテーブルは主キー（PK）としてid、そしてユーザ名を表すnameカラムを持つエンティティです。

Ordersテーブルは主キー（PK）としてid、外部キー（FK）としてuser_idを持つエンティティです。さらに注文日を表すdateカラムも持ちます。

users ||--o{ ordersの行はUsersテーブルとOrdersテーブルの間に1対多の関係があることを示しています。Usersは複数のOrdersを持つことができ、それぞれのOrderは特定のUserに所属します。

このようにPlantUMLを使用すると、エンティティとその間の関係性を視覚的に表現することができ、データベースの設計や理解に役立ちます。