# 機能設計書 1-ER図表示

## 概要

本ドキュメントは、Liamシステムにおける「ER図表示」機能の設計を記述したものである。データベーススキーマを視覚的なER図として表示し、テーブル間の関係性を直感的に理解できるようにする中核機能である。

### 本機能の処理概要

本機能は、データベーススキーマ情報をReact Flowベースのインタラクティブなダイアグラムとして描画する。ユーザーはパン、ズーム、ドラッグ等の操作でER図を自由に操作でき、テーブル構造や外部キー関係を視覚的に把握できる。

**業務上の目的・背景**：データベース設計の可視化は、開発者やDBAがスキーマ構造を素早く理解し、適切な設計判断を下すために不可欠である。従来のテキストベースのDDLやスキーマファイルでは、複雑なリレーションシップの把握が困難であり、本機能によってその課題を解決する。

**機能の利用シーン**：
- 既存データベースの構造理解
- スキーマレビュー時の視覚的確認
- 新規開発者のオンボーディング
- データベース設計の検討・議論

**主要な処理内容**：
1. スキーマ情報をReact Flowのノード・エッジ形式に変換
2. ELKアルゴリズムによる自動レイアウト計算
3. テーブルノードとリレーションシップエッジの描画
4. ユーザーインタラクション（パン、ズーム、選択）の処理
5. 表示モード（全カラム、キーのみ、テーブル名のみ）の切り替え

**関連システム・外部連携**：本機能はスキーマパーサー（PostgreSQL、Prisma、Rails、Drizzle等）から変換されたSchema情報を入力として受け取る。

**権限による制御**：表示は認証されたユーザーのみ可能。公開ERD画面では匿名ユーザーも閲覧可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | スキーマ画面 | 主画面 | スキーマファイルのERD表示 |
| 14 | デザインセッション詳細画面 | 主画面 | 設計中スキーマのER図表示 |
| 15 | 公開デザインセッション詳細画面 | 結果表示画面 | 公開セッションのスキーマをER図として表示 |
| 20 | 公開ERD画面 | 主画面 | 外部URLからスキーマを取得しER図を表示 |

## 機能種別

データ表示 / インタラクティブ可視化

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| schema | Schema | Yes | データベーススキーマ情報 | schemaSchemaによるバリデーション |
| showMode | ShowMode | Yes | 表示モード（ALL_FIELDS/KEY_ONLY/TABLE_NAME） | enum値チェック |
| showDiff | boolean | No | 差分表示モード | - |
| defaultSidebarOpen | boolean | No | サイドバー初期状態 | - |

### 入力データソース

- スキーマパーサーによって変換されたSchema型データ
- ユーザー設定（Cookie、ローカルストレージ）
- URLクエリパラメータ

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| nodes | Node[] | React Flowノード配列 |
| edges | Edge[] | React Flowエッジ配列 |

### 出力先

画面表示（ブラウザDOM）

## 処理フロー

### 処理シーケンス

```
1. スキーマデータ受信
   └─ Schema型データを受け取る
2. ノード・エッジ変換
   └─ convertSchemaToNodesでReact Flow形式に変換
3. 自動レイアウト計算
   └─ ELKアルゴリズムでノード位置を計算
4. 描画
   └─ React Flowコンポーネントでレンダリング
5. ユーザー操作処理
   └─ クリック、ホバー、ドラッグイベントを処理
```

### フローチャート

```mermaid
flowchart TD
    A[Schema入力] --> B[convertSchemaToNodes]
    B --> C{ノード・エッジ生成}
    C --> D[テーブルノード]
    C --> E[リレーションシップエッジ]
    D --> F[ELKレイアウト計算]
    E --> F
    F --> G[React Flow描画]
    G --> H{ユーザー操作}
    H -->|クリック| I[テーブル選択]
    H -->|ホバー| J[ハイライト表示]
    H -->|ドラッグ| K[位置更新]
    H -->|ズーム/パン| L[ビュー更新]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-001 | 非関連テーブルグループ化 | リレーションを持たないテーブルは専用グループノードの子として配置 | テーブルにForeignKey制約がない場合 |
| BR-002 | 表示モード切替 | showModeに応じてカラム表示内容を変更 | ユーザーが表示モードを切り替えた時 |
| BR-003 | ダークモード | 常にダークモードで表示 | 全ての画面 |

### 計算ロジック

リレーションシップの抽出は `constraintsToRelationships` 関数で実行され、ForeignKey制約からカーディナリティ情報を含むRelationship配列を生成する。

## データベース操作仕様

### 操作別データベース影響一覧

本機能はデータベースを直接操作しない。表示専用機能。

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| - | - | - | データベース操作なし |

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| PARSE_ERROR | パースエラー | スキーマファイルの解析失敗 | ErrorDisplayでエラー内容を表示 |
| NETWORK_ERROR | ネットワークエラー | スキーマファイルの取得失敗 | NetworkErrorDisplayで再試行を促す |

### リトライ仕様

なし（ユーザーによる再読み込み操作が必要）

## トランザクション仕様

該当なし（表示専用機能）

## パフォーマンス要件

- 初回レンダリング：1000テーブル以下で3秒以内
- レイアウト計算：ELKアルゴリズムは非同期処理
- ズーム範囲：MIN_ZOOM〜MAX_ZOOM

## セキュリティ考慮事項

- 認証されたユーザーのみプロジェクトスキーマにアクセス可能
- 公開ERD画面は匿名アクセス可能だが、共有設定が必要

## 備考

@xyflow/react（React Flow）ライブラリをベースとしたインタラクティブなダイアグラム表示を実現している。

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、ER図で扱うデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/erd-core/src/features/erd/types.ts` | TableNodeData型定義、表示に必要なデータ構造を把握 |
| 1-2 | Schema型 | `frontend/packages/schema/src/schema/index.ts` | 入力となるスキーマの型定義を確認 |

**読解のコツ**: TableNodeDataはReact Flowノードのdata部分に相当し、テーブル情報とハイライト状態を保持する。

#### Step 2: エントリーポイントを理解する

処理の起点となるコンポーネントを特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ErdRenderer.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/ErdRenderer.tsx` | メインのレンダラーコンポーネント、全体構成を把握 |

**主要処理フロー**:
1. **69-71行目**: スキーマの選択（showDiffに応じてcurrentまたはmerged）
2. **78-81行目**: convertSchemaToNodesでノード・エッジに変換
3. **170-176行目**: ERDContentコンポーネントに渡して描画

#### Step 3: スキーマ変換処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | convertSchemaToNodes.ts | `frontend/packages/erd-core/src/features/erd/utils/convertSchemaToNodes.ts` | スキーマからノード・エッジへの変換ロジック |

**主要処理フロー**:
- **20-21行目**: テーブルとリレーションシップを抽出
- **44-66行目**: テーブルノードを生成、非関連テーブルにはparentIdを設定
- **83-100行目**: エッジを生成、showModeに応じてhandleを設定

#### Step 4: React Flow描画を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | ErdContent.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDContent/ErdContent.tsx` | React Flowの実際の描画処理 |

**主要処理フロー**:
- **31-38行目**: カスタムノード・エッジ型の定義
- **152-181行目**: ReactFlowコンポーネントの設定

### プログラム呼び出し階層図

```
ERDRenderer
    │
    ├─ useSchemaOrThrow (スキーマ取得)
    │
    ├─ convertSchemaToNodes (変換)
    │      └─ constraintsToRelationships
    │
    └─ ERDContent (描画)
           ├─ useInitialAutoLayout
           │      └─ computeAutoLayout
           │             └─ getElkLayout
           │
           ├─ TableNode (ノード描画)
           │      ├─ TableHeader
           │      └─ TableColumnList
           │
           └─ RelationshipEdge (エッジ描画)
```

### データフロー図

```
[入力]               [処理]                    [出力]

Schema ───────────▶ convertSchemaToNodes ───▶ nodes/edges
                           │
                           ▼
                    getElkLayout ───────────▶ 位置計算済みnodes
                           │
                           ▼
                    ReactFlow ──────────────▶ DOM描画
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ErdRenderer.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/ErdRenderer.tsx` | ソース | メインレンダラー |
| ErdContent.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDContent/ErdContent.tsx` | ソース | React Flow描画 |
| convertSchemaToNodes.ts | `frontend/packages/erd-core/src/features/erd/utils/convertSchemaToNodes.ts` | ソース | スキーマ変換 |
| types.ts | `frontend/packages/erd-core/src/features/erd/types.ts` | ソース | 型定義 |
| TableNode.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDContent/components/TableNode/TableNode.tsx` | ソース | テーブルノード描画 |
| RelationshipEdge.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDContent/components/RelationshipEdge/RelationshipEdge.tsx` | ソース | エッジ描画 |
| getElkLayout.ts | `frontend/packages/erd-core/src/features/erd/utils/computeAutoLayout/getElkLayout.ts` | ソース | ELKレイアウト計算 |
| ERDRenderer.module.css | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/ERDRenderer.module.css` | スタイル | レンダラースタイル |
