Skip to main content
Glama
Fogrexon

Network Diagram MCP Server

by Fogrexon
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

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): ノードのID

  • label (string, required): ノードのラベル

  • x (number, optional): X座標

  • y (number, optional): Y座標

例:

{
  "id": "server1",
  "label": "Webサーバー",
  "x": 100,
  "y": 100
}

add_edge

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

パラメータ:

  • from (string, required): 開始ノードのID

  • to (string, required): 終了ノードのID

  • label (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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Fogrexon/network-diagram-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server