Network Diagram MCP Server
@modelcontextprotocol/sdkを使用したMCPサーバーで、ネットワークダイアグラムの作成と可視化を行います。MCPサーバーとして動作しながら、同時にWebインターフェースも提供します。
機能
MCPサーバー: Claude等のLLMクライアントから利用可能なツールを提供
Webインターフェース: リアルタイムでネットワークダイアグラムを可視化
REST API: プログラムからダイアグラムを操作可能
インストール
ビルド
起動方法
1. 標準的な起動（MCPサーバー + Webサーバー）
起動後、以下が利用可能になります：
MCPサーバー: stdin/stdoutで通信
Webインターフェース: http://localhost:3000
REST API: http://localhost:3000/api
2. カスタムポートで起動
テストデータの投入
サーバーが起動している状態で、別のターミナルからテストデータを投入できます。
テストデータスクリプトは以下を実行します：
既存のダイアグラムをクリア
Webアプリケーションアーキテクチャのサンプルを作成
11個のノード（ブラウザ、CDN、ロードバランサー、Webサーバー、DB等）
14個のエッジ（ノード間の接続）
実行後、http://localhost:3000 でダイアグラムを確認できます。
MCPツール
以下のツールが利用可能です：
add_node
ネットワークダイアグラムにノードを追加します。
パラメータ:
id(string, required): ノードのIDlabel(string, required): ノードのラベルx(number, optional): X座標y(number, optional): Y座標
例:
add_edge
ネットワークダイアグラムにエッジ（接続）を追加します。
パラメータ:
from(string, required): 開始ノードのIDto(string, required): 終了ノードのIDlabel(string, optional): エッジのラベル
例:
clear_diagram
ネットワークダイアグラムをクリアします。
REST API
GET /api/diagram
現在のダイアグラムデータを取得します。
レスポンス例:
POST /api/diagram/node
ノードを追加します。
リクエストボディ:
POST /api/diagram/edge
エッジを追加します。
リクエストボディ:
DELETE /api/diagram
ダイアグラムをクリアします。
GET /api/health
ヘルスチェックエンドポイント。
Webインターフェース
http://localhost:3000 にアクセスすると、以下の機能を持つWebインターフェースが表示されます：
リアルタイムでダイアグラムを可視化
マウスドラッグでビューポートを移動
マウスホイールでズームイン/アウト
2秒ごとに自動更新
ノード数、エッジ数の統計表示
最終更新日時の表示
手動更新ボタン
クリアボタン
Claude Desktopとの統合
Claude Desktopの設定ファイル（~/Library/Application Support/Claude/claude_desktop_config.json）に以下を追加：
使用例
Claudeでの使用例
curlでの使用例
ライセンス
ISC