PlantUMLでER図を書く

PlantUMLで以下のようなER図を書いたらすごく便利でした！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/4a0ee243-d821-5958-feb2-80abff41f34f.png)

PlantUMlを使うメリットは以下の通り。
- 記述方法覚えてしまえば、編集がすごい楽。
- VSCode上で記述&プレビュー表示できる
- Gitでソースコード管理できる
- ER図だけじゃなく、シーケンス図やクラス図も作成できる


修正すると、すぐにプレビューに反映されます（動画上はペーストしてます）
[![Image from Gyazo](https://i.gyazo.com/9e5f77b20a573acef2245356f779717a.gif)](https://gyazo.com/9e5f77b20a573acef2245356f779717a)

今回作成したER図の書き方を解説します。
VSCodeへのPlantUMLインストール方法は他の記事にお任せします。

https://tm-progapp.hatenablog.com/entry/2021/06/15/233535#VSCode%E3%81%A7PlantUML%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

# テーブルの作成方法
シンプルに書くだけなら以下のような記述で書くことができます。
`{}`の中にカラム名を書いていきます。

```
entity users  {
  id 
  --
  name 
  age
  birthplace
  comment
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/d4e711a0-eb4a-07fc-0bee-3c70c45ed525.png)

### 罫線
カラムとカラムの間に以下のように記述することで罫線がひけます。

| 記述方法 | 罫線     | 
| -------- | -------- | 
| ..       | 破線     | 
| --       | ノーマル | 
| __       | 太線     | 
| ==       | 二重線   | 


```
entity users  {
  id 
  --
  name
  __
  age
  ..
  birthplace
  ==
  comment
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/8c593264-31a0-1d4d-906c-082b9fd2f8eb.png)

### テーブルの説明を記載
テーブル名の後に `as "users\nユーザー"`といったように記述することで、テーブルの説明を記載することができます。
改行コードも使用できます。
```
entity users as "users\nユーザー" 
```
<img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/f6b2cf42-742e-1f5e-e914-7a7203888757.png">

### 修飾子
カラム名の前に記号を入力することで、修飾子をつけることができます。

```
entity users  {
 + id 
 --
 - name 
 ~ age
 # birthplace
 * comment
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/ac2b8d6e-3821-7027-159f-8829621a979e.png)

# リレーション
テーブルとテーブルのリレーションも簡単に実現できます。

| 記述方法       | 意味   | 
| -------------- | ------ | 
| &#124;o--<br>  | 0か1	  | 
| &#124;&#124;-- | 1のみ	 | 
| }o--           | 0以上	 | 
| }&#124;--<br>  | 1以上	 | 

```
Entity01 }|-r-|| Entity02
Entity01 }o.l.o| Entity04
Entity01 ||-u-o{ Entity06
Entity01 |o-d-|| Entity08
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/b16ca032-040e-3f8f-9f41-89c0c4bff837.png)

### 配置を整える

PlantUMLは自動でER図を作成してくれるのが魅力ですが、適当にリレーションを組むと図のようにあまり綺麗じゃないことがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/50989c57-5543-0bb2-2f7c-64c2d4cf7263.png)

`-r-` や `-u-` と記述することで、リレーションするテーブルの位置を指定することができます。

| 記述方法 | 指定できる方向     | 
| -------- | -------- | 
| l       | 左（left）     | 
| r       | 右（right） | 
| u       | 上（up）     | 
| d       | 下（down）   | 

```
Entity01 }|.r.|| Entity02
Entity01 }o.l.o| Entity04
Entity01 ||-u-o{ Entity06
Entity01 |o-d-|| Entity08
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/a89ac16c-31e5-f5d2-6790-d6b869e4851f.png)

# 最後に
これまでの文法を使用して書くと以下のようになります！
```

@startuml erd
entity users as "users\nユーザー" {
  id [PK]
  --
  name   string(20) [ユーザー名]
  ..
  age int(3) [年齢]
  ..
  birthplace   int(2) [出身地]
  ..
  comment   (200) [コメント]
}

entity jobs as "jobs\n職業" {
  + <b>id</b> [PK]
  ..
  <b>name</b>   string(40) [職業名]
}

entity areas as "areas\nエリア" {
  + <b>id</b> [PK]
  ..
  <b>name</b>   string(40) [エリア名]
}

entity users_jobs as "users_jobs\nユーザー職業" {
  + <b>id</b> [PK]
  ..
  <b>user_id</b> int(8) 
  ..
  <b>jobs_id</b> int (8)
}

users ||-l-|{ users_jobs
users_jobs }|-l-|| jobs
users }|-r-|| areas

@enduml

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/9f5d8d8c-1b6d-f108-5b76-e2bb661189f5.png)

初めはコードで記述するの面倒だと思っていましたけど、非常に便利でした！
ぜひPlantUML使用してみてください！

# 参考
https://plantuml.com/ja/ie-diagram

https://maku.blog/p/tn6y85z/

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