VSCodeでPlantUMLを使ってER図を描こう

こんにちは、サーバエンジニアの池脇です。
今回はVSCodeでのPlantUMLの使い方についてご紹介したいと思います。
使いやすさ、また自動生成のしやすさのため一部カスタムしている部分があることはご承知おきください。
自動生成についてはまた別の記事にしたいと思います。

## PlantUMLとは
テキストベースでUML図を描くことができるツールです。
もちろんER図だけではなく、クラス図やシーケンス図等の様々なダイアグラムに対応しています。
今回はその中でもER図に焦点を置いて解説しようと思います。

https://plantuml.com/ja/

## なぜPlantUMLでER図を描くのか
一言で言ってしまえば「テキストベースでER図の管理ができるから」です。
テキストベースで管理することの利点として
- バージョン管理する際に差分がわかりやすい
- 見た目について気にする時間を減らすことができる
- 自動生成に組み込みやすい

といった点があげられます。

## 導入方法

### 前提
[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code)は導入済みとします。[Cursor](https://www.cursor.com/)でも同様に使えるようです。
MacBook Pro(M1)で動作確認しております。

### PlantUMLのインストール
VSCodeの拡張機能から[PlantUML](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)を検索し、インストールしてください。

![スクリーンショット 2024-10-01 12.49.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/451b3ffe-9e72-a2b2-6c20-54152175787a.png)

### Javaのインストール
PlantUMLはJavaランタイムが必要です。
Java JDKをインストールしていない場合は
- [Javaの公式サイト](https://www.java.com/ja/)からダウンロード
- Macであれば[HomebrewからOpenJDKをインストール](https://formulae.brew.sh/formula/openjdk)

等してください。
またインストール後はVSCodeでパスを通すこともお忘れなく。
(以下はHomebrewでOpenJDKをインストールした際の例)
```json
"java.jdt.ls.java.home": "/opt/homebrew/opt/openjdk/libexec/openjdk.jdk/Contents/Home"
```

### Graphvizのインストール
ER図を描画するために[Graphviz](https://graphviz.org/download/)が必要になります。
MacであればHomebrewでインストールできます。
```shell
brew install graphviz
```

## 使い方
拡張子`.pu`でファイルを作成してください。
例として`item.pu`をご紹介します。
<details open><summary>item.pu</summary>

```
@startuml item

!define MASTER <<M, A2A0CE>> #FFD6FF
!define USER <<U, FDB654>> #FEDAA7
!define ENUM <<E, 3DCC3D>> #DDFFDD

namespace item {}

package item <<Rectangle>> {
	entity "m_item" MASTER {
		+<b>item_id / アイテムID : string
		item_type / アイテム種別 : ItemType
		sort_no / 並び順 : long
		item_value / アイテム設定値 : long
		item_name / アイテム名 : string
		item_description / アイテム説明 : string
	}
}

package item <<Rectangle>> {
	entity "t_user_item" USER {
		+<b>user_id / ユーザID : long
		+<b>item_id / アイテムID : string
		item_amount / アイテム所持数 : long
	}
}

package item <<Rectangle>> {
	enum "ItemType" ENUM {
		Gold : 通貨
		Ticket : チケット
		Point : ポイント
	}
}

m_item -- item.ItemType
m_item -- t_user_item

@enduml
```
</details>

それぞれ解説していきます。
```
@startuml item
・
・
・
@enduml
```
こちらはPlantUMLであることを明示する記法です。
`.pu`ファイルは必ず記載しましょう。(`item`部分は任意です)

---

```
!define MASTER <<M, A2A0CE>> #FFD6FF
!define USER <<U, FDB654>> #FEDAA7
!define ENUM <<E, 3DCC3D>> #DDFFDD
```
各Entityの色の定義を行なっています。
色分けすることで何を示すテーブルなのかわかりやすくなるため、必要に応じて定義を行いましょう。

---

```
namespace item {}

package item <<Rectangle>> {
・
・
・
}
```
パッケージの定義です。
今回は`<<Rectangle>>`を使用していますが、他にも`<<Database>>`や`<<Folder>>`等を使用することで見た目を変えることができます。
弊プロジェクトではテーブルの分類を分けるために利用しています。

---

```
	entity "m_item" MASTER {
		+<b>item_id / アイテムID : string
		item_type / アイテム種別 : ItemType
		sort_no / 並び順 : long
		item_value / アイテム設定値 : long
		item_name / アイテム名 : string
		item_description / アイテム説明 : string
	}
```
テーブルの定義です。
弊プロジェクトでは`!define`で定義したものを指定して色を決め、PKは太字にすることで見やすくしています。

---

```
	enum "ItemType" ENUM {
		Gold : 通貨
		Ticket : チケット
		Point : ポイント
	}
```
Enumの定義です。
テーブルのカラムにEnumを入れた際に何が入ってくるものなのかわかりやすくするため、こちらもER図で同時に見られるようにしています。

---

```
m_item -- item.ItemType
m_item -- t_user_item
```
最後にリレーションの定義です。
ここでは自動生成のしやすさのため、カーディナリティはあえて定義していません。

---

実際にER図をプレビューする際は
- 右クリックメニューから「ダイアグラムをプレビュー」を選択
![スクリーンショット 2024-10-01 18.40.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1c6acbf4-9558-7f42-cb20-9d8c643cc819.png)
- `Command` + `Shift` + `P`で「plantuml」を入力し「ダイアグラムをプレビュー」を選択
![スクリーンショット 2024-10-01 18.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/8445d375-9eca-1076-fd53-a09dd47768a5.png)

のいずれかを行なってください。
画像等で出力したい場合は「エクスポート」を選択してください。
最終的に上記のコードから生成されたER図がこちらです。

```plantuml
@startuml item

!define MASTER <<M, A2A0CE>> #FFD6FF
!define USER <<U, FDB654>> #FEDAA7
!define ENUM <<E, 3DCC3D>> #DDFFDD

namespace item {}

package item <<Rectangle>> {
	entity "m_item" MASTER {
		+<b>item_id / アイテムID : string
		item_type / アイテム種別 : ItemType
		sort_no / 並び順 : long
		item_value / アイテム設定値 : long
		item_name / アイテム名 : string
		item_description / アイテム説明 : string
	}
}

package item <<Rectangle>> {
	entity "t_user_item" USER {
		+<b>user_id / ユーザID : long
		+<b>item_id / アイテムID : string
		item_amount / アイテム所持数 : long
	}
}

package item <<Rectangle>> {
	enum "ItemType" ENUM {
		Gold : 通貨
		Ticket : チケット
		Point : ポイント
	}
}

m_item -- item.ItemType
m_item -- t_user_item

@enduml
```
---

今回は自動生成のためにあえて簡略化したER図を作成しています。
もっと細かい指定も可能なため、詳しい使い方を知りたい方は以下のページを見ることをおすすめします。

https://medium.com/veltra-engineering/how-to-draw-er-diagram-with-plantuml-86ec2095645e

また見た目にこだわりたい方は以下の記事もおすすめです。

https://qiita.com/murakami-mm/items/4c50d1949a8b10016ef7

## まとめ
今回はVSCodeでPlantUMLを利用してER図を描く手法についてご紹介しました。
PlantUMLは使いこなすことで色々なことができるので是非覚えていきたいですね。
次回はこのER図を自動生成する手法について記事にしたいと思います。

## 参考
- [【超簡単!!】ER図が爆速で書けるPlantUMLの使い方](https://zenn.dev/aya1357/articles/bcffc6bb8b33f1)