Network Diagram MCP Server

# 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