VScodeでER図を作成してGithubで共有する

はじめに

VScodeでER図を作成するためにMermaidを使用します。
Mermaidはコードベースで書いたものを図にすることができるツールです。
GithubとVScodeもサポートされているので、Githubでコード管理しているプロジェクトにとってDB設計を共有しやすいです。

使い方

• VScodeで拡張を入れる
  プレビュー機能を使用すると、書きながらER図を確認できるので便利です。

• Mermaidコードに色がつく拡張

• コードブロックにmermaidと記載すると、Mermaid記法で書いたものが図になります
• erDiagramと記載するとER図が作成できます

```mermaid
erDiagram

    Companies ||--|{ Employees : "会社は複数の社員を持つ"

    
	Companies {
		String id   PK "会社ID"
		String name    "会社名"
	}
    
	Employees {
		String id        PK "社員ID"
		String companyId FK "会社ID"
		String name         "社員名"
		Int    age          "年齢"
	}
```

• テーブル同士の関係を表す際に使用する記法と意味は下記の通り。

|o	o|	・・・　０または1
||	||	・・・　1
}o	o{	・・・　0以上
}|	|{	・・・　1以上

READMEに記載すれば、プロジェクトのDB設計がすぐに確認できます。
またPRでもコードブロックにmermaidを記載すれば、図を表示することができます。

おわりに

VScodeとGithubに対応しているのはありがたい。
erDiagramについて紹介しましたが、円グラフやマインドマップ等も作成できるみたいです。
面白いので他のものもどんどん使おうと思います。