# Liam ERD

## 概要

Liam ERDは、データベーススキーマから美しくインタラクティブなER図を自動生成するオープンソースツールです。パブリック・プライベートリポジトリを問わず、複雑なデータベーススキーマを視覚的に分かりやすく可視化することができます。

## 主な機能

| 機能カテゴリ | 説明 |
| --- | --- |
| ER図自動生成 | データベーススキーマからER図を自動生成。100以上のテーブルにも対応した高パフォーマンス |
| インタラクティブUI | パン、ズーム、フィルタリングなど直感的な操作が可能な美しいUIを提供 |
| リバースエンジニアリング | 既存のデータベーススキーマを読みやすい図に変換 |
| ゼロコンフィグ | スキーマを提供するだけで設定不要ですぐに利用可能 |
| CLIツール | コマンドラインからER図を生成するWebアプリケーションを構築 |
| スキーマパース | 複数フォーマット（schema.rb、Prisma、PostgreSQL DDLなど）のスキーマ解析に対応 |
| AIエージェント | LangGraphベースのAIエージェントシステムによるデータベース設計支援 |
| MCPサーバー | Model Context Protocolサーバーによる外部ツール連携 |

## 技術スタック

### コア

- フレームワーク: Next.js 15
- 言語: TypeScript
- ランタイム: React 19
- パッケージマネージャー: pnpm 10
- ビルドツール: Turborepo
- データベース: Supabase (PostgreSQL)

### 主要ライブラリ

- @xyflow/react - フローチャート/ダイアグラム可視化
- valibot - ランタイム型バリデーション
- @langchain/langgraph - AIエージェントフレームワーク
- Radix UI - アクセシブルなUIコンポーネント
- CSS Modules - スタイリング
- Biome - リンター/フォーマッター

## ディレクトリ構成

```
liam-main/
├── frontend/
│   ├── apps/
│   │   ├── app/          # メインNext.jsウェブアプリケーション (@liam-hq/app)
│   │   ├── docs/         # ドキュメントサイト (@liam-hq/docs)
│   │   ├── assets/       # 静的アセット
│   │   └── erd-sample/   # ERDサンプル
│   ├── packages/
│   │   ├── cli/          # CLIツール (@liam-hq/cli)
│   │   ├── erd-core/     # ERD可視化コアライブラリ (@liam-hq/erd-core)
│   │   ├── schema/       # スキーマパーサー (@liam-hq/schema)
│   │   ├── ui/           # UIコンポーネントライブラリ (@liam-hq/ui)
│   │   └── db-structure/ # DB構造定義
│   └── internal-packages/
│       ├── agent/        # AIエージェントシステム (@liam-hq/agent)
│       ├── db/           # データベースユーティリティ (@liam-hq/db)
│       ├── mcp-server/   # MCPサーバー実装 (@liam-hq/mcp-server)
│       ├── github/       # GitHub連携
│       ├── pglite-server/ # PGLiteサーバー
│       └── ...           # その他内部パッケージ
├── docs/                 # プロジェクトドキュメント
├── scripts/              # ビルド/ユーティリティスクリプト
├── config/               # 設定ファイル
└── assets/               # ルートアセット
```

## セットアップ

### 必要条件

- Node.js 22.x (.node-versionで指定)
- pnpm 10.18.3以上

### インストール手順

1. リポジトリをクローン

```bash
git clone https://github.com/liam-hq/liam.git
cd liam
```

2. 依存関係のインストール

```bash
pnpm install
```

3. 環境変数の設定

```bash
cp .env.template .env
# .envファイルを編集して必要な値を設定
```

4. 開発サーバーの起動

```bash
pnpm dev
```

### パブリックリポジトリでの利用

URLに`liambx.com/erd/p/`を挿入するだけで利用可能:

```
# 元のURL: https://github.com/user/repo/blob/master/db/schema.rb
# 変更後:  https://liambx.com/erd/p/github.com/user/repo/blob/master/db/schema.rb
```

### プライベートリポジトリでの利用

```bash
npx @liam-hq/cli init
```

## 開発

### 基本コマンド

```bash
# 開発サーバー起動
pnpm dev

# ビルド
pnpm build

# リント・フォーマットチェック
pnpm lint

# テスト実行
pnpm test

# コードフォーマット
pnpm fmt
```

### パッケージ固有のコマンド

```bash
# メインウェブアプリのみ起動 (ポート3001)
pnpm --filter @liam-hq/app dev

# ドキュメントサイト起動 (ポート3002)
pnpm --filter @liam-hq/docs dev

# 特定パッケージのフォーマット
pnpm --filter @liam-hq/agent fmt

# 特定パッケージのテスト
pnpm --filter @liam-hq/agent test

# CSS型定義の生成
pnpm gen:css
```

### データベース操作 (Supabase)

```bash
cd frontend/internal-packages/db

# ローカルSupabase起動
pnpm supabase:start

# マイグレーション作成
pnpm supabase:migration -f <migration_name>

# マイグレーション適用
pnpm supabase:migration:up

# 型定義とスキーマ生成
pnpm supabase:gen
```

### コード規約

- 名前付きエクスポートのみ使用（デフォルトエクスポート禁止）
- イベントハンドラは`handle`プレフィックス（例: `handleClick`）
- CSS ModulesでスタイリングValibot
- `@liam-hq/ui`からUIコンポーネントとアイコンをインポート
