Prisma ER Diagram Visualizer

Prisma スキーマファイル (schema.prisma) からインタラクティブな ER ダイアグラムを生成する VSCode 拡張機能です。

機能

• ER ダイアグラム表示 - モデル、フィールド、リレーションを視覚的に表示
• パン / ズーム - マウスドラッグで移動、スクロールで拡大縮小
• テーブルドラッグ - テーブルを自由に配置
• 検索 - テーブル名・カラム名で検索 (Cmd+F / Ctrl+F)
• テーマ切替 - ライト / ダークテーマ対応
• 詳細レベル切替 - Full Details / Key Only / Header Only
• Auto-arrange - dagre アルゴリズムによる自動レイアウト
• PNG 出力 - ダイアグラムを画像としてダウンロード
• 自動更新 - .prisma ファイル保存時にダイアグラムを自動更新
• /// コメント対応 - モデル・フィールドのドキュメントコメントを表示

使い方

1. VSCode で .prisma ファイルを開く
2. コマンドパレット (Cmd+Shift+P / Ctrl+Shift+P) を開く
3. 「Prisma: Show ER Diagram」 を実行
4. エディタ右側に ER ダイアグラムが表示される

エディタのタイトルバーにあるプレビューアイコンからも起動できます。

/// コメント表示

Prisma の /// ドキュメントコメントに対応しています。

/// 医院（クリニック）
model Clinic {
  /// 一意識別子
  id    BigInt @id @default(autoincrement())
  /// 名前
  name  String
}

• モデルコメント → テーブルヘッダーの下にサブタイトルとして表示
• フィールドコメント → カラムにホバーするとツールチップとして表示

prisma-commenter との連携

prisma-commenter を使うと、データベースのカラムコメントと schema.prisma の /// コメントを簡単に同期できます。

# データベースのコメントを schema.prisma に反映
npx prisma-commenter pull

# schema.prisma の /// コメントをデータベースに反映
npx prisma-commenter push

prisma db pull では失われてしまうデータベースのコメントを /// として保持し、本拡張機能で ER ダイアグラム上に可視化できます。

設定

開発

# 依存関係のインストール
npm install

# ビルド
npm run build

# デバッグ実行
# VSCode で F5 を押す

クレジット

本プロジェクトは BOCOVO/db-schema-visualizer (MIT License) をベースに開発されています。

ライセンス

MIT License - 詳細は LICENSE をご覧ください。