Network Diagram MCP Server
@modelcontextprotocol/sdkを使用したMCPサーバーで、ネットワークダイアグラムの作成と可視化を行います。MCPサーバーとして動作しながら、同時にWebインターフェースも提供します。
機能
- MCPサーバー: Claude等のLLMクライアントから利用可能なツールを提供
- Webインターフェース: リアルタイムでネットワークダイアグラムを可視化
- REST API: プログラムからダイアグラムを操作可能
インストール
npm install
ビルド
npm run build
起動方法
1. 標準的な起動（MCPサーバー + Webサーバー）
npm start
起動後、以下が利用可能になります：
- MCPサーバー: stdin/stdoutで通信
- Webインターフェース: http://localhost:3000
- REST API: http://localhost:3000/api
2. カスタムポートで起動
PORT=8080 npm start
テストデータの投入
サーバーが起動している状態で、別のターミナルからテストデータを投入できます。
# サーバーを起動（ターミナル1）
npm start
# テストデータを投入（ターミナル2）
npm run test-data
テストデータスクリプトは以下を実行します：
- 既存のダイアグラムをクリア
- 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座標
例:
{
"id": "server1",
"label": "Webサーバー",
"x": 100,
"y": 100
}
add_edge
ネットワークダイアグラムにエッジ（接続）を追加します。
パラメータ:
from(string, required): 開始ノードのIDto(string, required): 終了ノードのIDlabel(string, optional): エッジのラベル
例:
{
"from": "server1",
"to": "db1",
"label": "SQL"
}
clear_diagram
ネットワークダイアグラムをクリアします。
REST API
GET /api/diagram
現在のダイアグラムデータを取得します。
レスポンス例:
{
"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
ノードを追加します。
リクエストボディ:
{
"id": "server1",
"label": "Webサーバー",
"x": 100,
"y": 100
}
POST /api/diagram/edge
エッジを追加します。
リクエストボディ:
{
"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）に以下を追加：
{
"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での使用例
# ノードを追加
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