ER図をGitHubで管理したいぞ！
How to manage ER diagram on GitHub.
いきなりですが、ER図、描いてますか？ちゃんとメンテナンスされているER図があれば、データ構造を読み解く際にとても重宝します。一方で、ER図をきれいに描くのはとても面倒だったりします。
巷にはER図を描けるツールはごまんとありますが、私が知る限り、GitHubで上手く管理できるツールは見たことがないです。ソースを含めドキュメントの管理はGitHubでしているのに、ER図だけはこっち。なんて嫌なので、なんとかGitHubでER図を管理する方法を探った結果、たどり着いたのはPlantUML×Pegmatiteでした。ということで本日はこれの紹介です。
ツール選定で重視したこと、諦めたこと
まず、ER図作成ツールを探すにあたって、重視したのは以下です。
- ER図のデータをGitHubで管理できる（テキストデータである）
- WEBブラウザ上でER図を確認できる（ダウンロード不要！）
- 属性については必要最低限のものだけ載せたい
（エンティティ間の関連をわかりやすく表現したい） - 通常記法以外でも、情報を付加できると嬉しい
例）マスターとそれ以外を区別する
ですので、以下のことは考えていません。
- ER図のデータを元にSQLを自動生成できる
- 実際のDBからER図を自動生成できる
属性を全て載せない時点で、SQLの自動生成なんて無理ですよね。
PlantUMLでER図を描く！
PlantUMLは、その名の通りER図に限らずUML全般を書くことのできるツールです。以下のようにテキストを書いてあげると、そこから自動的に画像を生成してくれます。
@startuml
entity "foo" {
+ foo_id
--
name
...
}
entity "bar" {
+ bar_id
--
# foo_id
name
...
}
foo ||-ri-o{ bar
@enduml出来上がるのはこんな感じ。
なお、ローカルPCで画像を取得するためには、PlantUMLをインストールする必要があります。VSCodeなんかは拡張機能があるので、エディタで編集しながら画像イメージを確認することができます。手順は以下リンク先をご参照ください。
Pegmatiteを使えばブラウザ上で見れる！
Pegmatiteは、GitHubのドキュメント内に記載されているPlantUMLのテキストを、ブラウザ上で画像に置き換えてくれるChromeの拡張機能です。ひとつ気を付ける点として、Markdownファイルとして記述し、PlantUMLのテキストはlangにumlを指定したコードブロック内に記載する必要があります。以下のように記載します。
```uml
@startuml
(PlantUML Text)
@enduml
```Markdownのコードブロックとして描けるので、複数の画像を一つのファイルにまとめることもできます。ファイル数が膨大にならなくて、とてもいいですね！
PegmatiteをChromeに追加したら、こちらをご確認ください。ちゃんと画像に変換されたらOKです。（ダメな場合、リロードで成功するかも）
なお、Pegmatiteの作成者は日本の方です。下記で紹介されているので、詳細はこちらをご確認ください。
今回は、ER図をGitHubで管理する方法にフォーカスしました。GitHubで管理することで、ER図に修正が入った場合の運用フロー（履歴管理やレビュ）もGitHubに任せられるのでとても便利です。
次回は、今回あまり触れられなかった、PlantUMLでのER図の描き方について、紹介したいと思います！
