# Network Diagram MCP Server

@modelcontextprotocol/sdkを使用したMCPサーバーで、ネットワークダイアグラムの作成と可視化を行います。MCPサーバーとして動作しながら、同時にWebインターフェースも提供します。

## 機能

- **MCPサーバー**: Claude等のLLMクライアントから利用可能なツールを提供
- **Webインターフェース**: リアルタイムでネットワークダイアグラムを可視化
- **REST API**: プログラムからダイアグラムを操作可能

## インストール

```bash
npm install
```

## ビルド

```bash
npm run build
```

## 起動方法

### 1. 標準的な起動（MCPサーバー + Webサーバー）

```bash
npm start
```

起動後、以下が利用可能になります：
- MCPサーバー: stdin/stdoutで通信
- Webインターフェース: http://localhost:3000
- REST API: http://localhost:3000/api

### 2. カスタムポートで起動

```bash
PORT=8080 npm start
```

## テストデータの投入

サーバーが起動している状態で、別のターミナルからテストデータを投入できます。

```bash
# サーバーを起動（ターミナル1）
npm start

# テストデータを投入（ターミナル2）
npm run test-data
```

テストデータスクリプトは以下を実行します：
- 既存のダイアグラムをクリア
- Webアプリケーションアーキテクチャのサンプルを作成
  - 11個のノード（ブラウザ、CDN、ロードバランサー、Webサーバー、DB等）
  - 14個のエッジ（ノード間の接続）

実行後、http://localhost:3000 でダイアグラムを確認できます。

## MCPツール

以下のツールが利用可能です：

### `add_node`

ネットワークダイアグラムにノードを追加します。

**パラメータ:**
- `id` (string, required): ノードのID
- `label` (string, required): ノードのラベル
- `x` (number, optional): X座標
- `y` (number, optional): Y座標

**例:**
```json
{
  "id": "server1",
  "label": "Webサーバー",
  "x": 100,
  "y": 100
}
```

### `add_edge`

ネットワークダイアグラムにエッジ（接続）を追加します。

**パラメータ:**
- `from` (string, required): 開始ノードのID
- `to` (string, required): 終了ノードのID
- `label` (string, optional): エッジのラベル

**例:**
```json
{
  "from": "server1",
  "to": "db1",
  "label": "SQL"
}
```

### `clear_diagram`

ネットワークダイアグラムをクリアします。

## REST API

### `GET /api/diagram`

現在のダイアグラムデータを取得します。

**レスポンス例:**
```json
{
  "nodes": [
    {"id": "server1", "label": "Webサーバー", "x": 100, "y": 100}
  ],
  "edges": [
    {"from": "server1", "to": "db1", "label": "SQL"}
  ],
  "lastUpdate": "2024-01-01T00:00:00.000Z"
}
```

### `POST /api/diagram/node`

ノードを追加します。

**リクエストボディ:**
```json
{
  "id": "server1",
  "label": "Webサーバー",
  "x": 100,
  "y": 100
}
```

### `POST /api/diagram/edge`

エッジを追加します。

**リクエストボディ:**
```json
{
  "from": "server1",
  "to": "db1",
  "label": "SQL"
}
```

### `DELETE /api/diagram`

ダイアグラムをクリアします。

### `GET /api/health`

ヘルスチェックエンドポイント。

## Webインターフェース

http://localhost:3000 にアクセスすると、以下の機能を持つWebインターフェースが表示されます：

- リアルタイムでダイアグラムを可視化
- マウスドラッグでビューポートを移動
- マウスホイールでズームイン/アウト
- 2秒ごとに自動更新
- ノード数、エッジ数の統計表示
- 最終更新日時の表示
- 手動更新ボタン
- クリアボタン

## Claude Desktopとの統合

Claude Desktopの設定ファイル（`~/Library/Application Support/Claude/claude_desktop_config.json`）に以下を追加：

```json
{
  "mcpServers": {
    "network-diagram": {
      "command": "node",
      "args": ["/path/to/network-diagram-mcp/build/index.js"]
    }
  }
}
```

## 使用例

### Claudeでの使用例

```
ユーザー: Webアプリケーションのアーキテクチャ図を作成してください

Claude:
1. add_node({ id: "client", label: "ブラウザ" })
2. add_node({ id: "lb", label: "ロードバランサー" })
3. add_node({ id: "web", label: "Webサーバー" })
4. add_node({ id: "db", label: "データベース" })
5. add_edge({ from: "client", to: "lb", label: "HTTPS" })
6. add_edge({ from: "lb", to: "web", label: "HTTP" })
7. add_edge({ from: "web", to: "db", label: "SQL" })

ダイアグラムを作成しました。http://localhost:3000 で確認できます。
```

### curlでの使用例

```bash
# ノードを追加
curl -X POST http://localhost:3000/api/diagram/node \
  -H "Content-Type: application/json" \
  -d '{"id": "server1", "label": "Webサーバー", "x": 200, "y": 200}'

# エッジを追加
curl -X POST http://localhost:3000/api/diagram/edge \
  -H "Content-Type: application/json" \
  -d '{"from": "server1", "to": "db1", "label": "SQL"}'

# ダイアグラムを取得
curl http://localhost:3000/api/diagram

# ダイアグラムをクリア
curl -X DELETE http://localhost:3000/api/diagram
```

## ライセンス

ISC