Prismaで生成するER図を横向きにする方法（prisma-erd-generator + Mermaid）

Prismaスキーマから自動でER図を生成してくれる便利なツール prisma-erd-generator。
ですが、デフォルトだと縦向き（Top to Bottom）に生成されてしまいます。

「横向き（Left to Right）に表示したい！」というケース、ありますよね。
この記事では、ER図を横向きにする方法を、Mermaidの設定ファイルを使って解説します。

手順まとめ

1. mermaid-config.json を作成し、layoutDirection を "LR" に指定する。
2. schema.prisma に mermaidConfig オプションを追加する。
3. npx prisma generate を実行するだけ！

前提

• 使用するツール：prisma-erd-generator
• Mermaidを内部で使ってER図を描画している

手順

1. Mermaid設定ファイルの作成

プロジェクトルートにmermaid-config.jsonという名前で以下のファイルを作成します。

{
  "er": {
    "layoutDirection": "LR"
  }
}

ここで "LR" は Left to Right（左から右） の意味です。
他にも "TB"（上から下、デフォルト）、"RL"（右から左）、"BT"（下から上）などが指定できます。

2. schema.prisma にオプション追加

generator erd {
  provider      = "prisma-erd-generator"
  output        = "./erd"
  mermaidConfig = "./mermaid-config.json"
}

これで、ER図生成時に上記のmermaid-config.jsonを読み込んでくれるようになります。

3. ER図の再生成

npx prisma generate

これで、./erd ディレクトリ以下に横向きのER図が生成されます！

補足

設定ファイルの構造について

prisma-erd-generator は内部的に Mermaid を使用しています。
Mermaidには以下のような設定カテゴリがありますが、ER図用の設定は er セクションで指定する必要があります。

{
  "er": {
    "layoutDirection": "LR" // ER図用
  },
  "flowchart": {
    "direction": "LR" // これは ER図には効きません！
  }
}

おまけ：Mermaidの設定オプション一覧

mermaid-js/mermaid/defaultConfig.ts にすべて載っています。
ER図だけでなく、flowchartやsequence diagramなどにも使えるので、より高度なカスタマイズが可能です。

まとめ

• mermaidConfig を使えば、ER図のレイアウトを自由に変えられる
• layoutDirection を指定する場合は "er" セクションに書くのがポイント
• Mermaidの構造を理解しておくと、今後の図自動生成にも応用が効く！