簡単、手軽にER図を作成し、GitHub上で表示させる方法

# はじめに
この記事は、
* データベース設計のER図作成
* GitHub上にER図を表示

この二つを簡単手軽に行う方法を説明します。

# ER図作成
まずはデータベースの設計を考えます。
設計の構想に関しては今回は既に済ませてあるものとして、

* その考えをER図に表したい！
* ER図を書きながら考えたい！

という風になると思います。
しかし同時に、以下のような気持ちにもなります。

* ER図を書くための環境準備が面倒！
* 時間がない！


そんな時に利用したいのがオンラインで使うPlantUMLです。

>[Web版plantUML](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)

こちらのPlantUMLでコードを入力します。

まず@startumlを入力した後は、各テーブル(エンティティ)を下記のように入力していきます。

><details><summary>plantUMLコード表示</summary><div>

```plantuml.md:
@startuml internet_tv
' チャンネル
entity "channels"{
  +channel_id [PK]
  ==
  channel_name:varchar(100)
}
' 番組チャンネル
entity "channel_programs"{
  #channel_id [FK(channels,id)]
  #program_id [FK(program,id)]
  time_slot:datetime
}
' 番組
entity "programs"{
  +program_id [PK]
  ==
  *title:varchar(100)
  description:text
}
' シーズン
entity "seasons"{
  +season_id [PK]
  ==
  #program_id [FK(programs,id)] 
  season_number:int 
}
' エピソード
entity "episodes"{
  +episode_id [PK]
  ==
  #season_id [FK(seasons,id)]
  title:varchar(100)
  episode_no:int
  duration:time
  release_date:date
  description:text
  views:int default 0
}
' ジャンル
entity "genres"{
  +genre_id [PK]
  ==
  *name:varchar(50)
}
' 番組ジャンル
entity "program_genres"{
  #program_genres_id:int[FK(channels,id)]
  #genre_id [FK(genres,id)]
  
}
' 視聴数
entity "views"{
  #episode_id [FK(episodes,id)]
  #channel_id [FK(channels,id)]
  time_slot:datetime
  view_count:int
}
```
></div></details>

その下にリレーションを下記のように入力し、関連性を示した後で@endumlを入力。
><details><summary>plantUMLコード表示</summary><div>

```plantuml.md
'リレーション

channels ||--o{ channel_programs
programs ||--o{ channel_programs
programs ||--o{ program_genres
programs ||--|{ seasons
seasons   ||--|{ episodes
episodes  ||--o{ views
genres    ||--o{ program_genres
program_genres ||--o{ programs
channel_programs ||--o{ channels
channel_programs ||--o{ programs
views ||--o{ episodes

@enduml
```
></div></details>

するとプレビューに以下のようなER図が表示されます。
<details><summary>ER図</summary><div>

```plantuml
@startuml internet_tv
' チャンネル
entity "channels"{
  +channel_id [PK]
  ==
  channel_name:varchar(100)
}
' 番組チャンネル
entity "channel_programs"{
  #channel_id [FK(channels,id)]
  #program_id [FK(program,id)]
  time_slot:datetime
}
' 番組
entity "programs"{
  +program_id [PK]
  ==
  *title:varchar(100)
  description:text
}
' シーズン
entity "seasons"{
  +season_id [PK]
  ==
  #program_id [FK(programs,id)] 
  season_number:int 
}
' エピソード
entity "episodes"{
  +episode_id [PK]
  ==
  #season_id [FK(seasons,id)]
  title:varchar(100)
  episode_no:int
  duration:time
  release_date:date
  description:text
  views:int default 0
}
' ジャンル
entity "genres"{
  +genre_id [PK]
  ==
  *name:varchar(50)
}
' 番組ジャンル
entity "program_genres"{
  #program_genres_id:int[FK(channels,id)]
  #genre_id [FK(genres,id)]
  
}
' 視聴数
entity "views"{
  #episode_id [FK(episodes,id)]
  #channel_id [FK(channels,id)]
  time_slot:datetime
  view_count:int
}

'リレーション

channels ||--o{ channel_programs
programs ||--o{ channel_programs
programs ||--o{ program_genres
programs ||--|{ seasons
seasons   ||--|{ episodes
episodes  ||--o{ views
genres    ||--o{ program_genres
program_genres ||--o{ programs
channel_programs ||--o{ channels
channel_programs ||--o{ programs
views ||--o{ episodes

@enduml
```
</div></details>


# GitHub上で画像表示
ER図の作成に成功できたでしょうか。
作成出来たら早速その画像を保存しましょう。

Githubの自分のアカウントに移動し、左上のIssuesをクリックして、新しいissueを作成します。

![qiita1](https://github.com/MatsudaSaku/InternetTV_Document/assets/149235059/cbc4bfc9-2da5-434e-b7a2-b53882bdb9f3)

すると以下の画面へと遷移します。

![qiita2](https://github.com/MatsudaSaku/InternetTV_Document/assets/149235059/a8883502-3186-4c4e-924f-8209d8ca3133)

Add your description here　と表示されている部分に、保存したER図の画像ファイルをドラック&ドロップします。

するとリンクが生成されます。このリンクをコピーした後は、作成しようとしていたissueは破棄して大丈夫です。

画像を貼りたい場所にリンクをペーストすれば画像を埋め込むことができます。

# 最後に
今回はER図を作成、GitHubにアップロードをする、という一連の作業を簡単な方法で実行してみました。

私自身、ER図の作成という未経験の作業をするのに迷い、時間をかけながら、
Javaや、 Graphvizをインストールし、VSCodeにPlantUMLをインストールし、
VSCode上での作業環境を整えましたが、その利点があまり感じられませんでした。

調べてみるとVSCodeのプロジェクト管理機能を利用し、プロジェクト内の組織化や管理に役立つことができるそうです。
しかし一人で最低限の機能を使用するのであれば、手軽さを重視したこの記事も役立てるのではないかと思い、作成しました。