こんにちは！エンジニアの岸本です。
仕様設計を固める段階で「ER図を作成しよう！」ということになったものの、
既にBlitz.jsアプリケーション自体は存在している稀な状況だったので、「schemaファイルからそのままER図生成できるのでは？」という思考に至りました。調査したところ、prisma-erd-generatorというライブラリを発見したので使用方法と結果を報告します。
その前に..
GitHubでmermaid記法を用いてMarkdownで図を書けるようになったこともあり、 mermaid記法でゴリゴリ自分で描きたい！という方はこちらの記事をどうぞ。 github.blog
手順1.
パッケージをインストール
npm i -D prisma-erd-generator @mermaid-js/mermaid-cli # or yarn add -D prisma-erd-generator @mermaid-js/mermaid-cli
手順2.
schema.prismaに下記を追記
generator erd {
provider = "prisma-erd-generator"
}
任意の場所に生成したER図を保存する場合
generator erd {
provider = "prisma-erd-generator"
output = "../ERD.svg"
}
拡張子を指定
- svg (default: ./prisma/ERD.svg) - png - pdf - md
手順3.
ターミナルから以下コマンドを叩く
npx prisma generate
テーマを選べる
以下それぞれのテーマを選択することで見た目をカスタマイズしてくれます
- default (default)
- forest
- dark
- neutral
結果
テーマはforestが個人的におすすめ
感想
今回、ER図作成した意図としては、ER図をチームで共有しながら認識のすり合わせのために利用したかったのですが、
構成テーブルが思いのほか多っかたので結局のところ、prisma-erd-generatorで出力したER図を参照しながら別のツールでER図を改めて作成しました。
しかし、初めてのER図作成だったためカーディナル（エンティティ間の関係を表す線）をprisma-erd-generatorで出力したER図を参考にしながら記述できたので助かりました。
おまけ
任意のタイミングでのみER図生成処理を行いたい場合、環境変数で以下を指定することで管理可能
DISABLE_ERD=true
