draw-flow-mcp-server

Next AI Draw.io MCP サーバー

Claude Desktop や Cursor などの AI エージェントが、リアルタイムのブラウザプレビューを使って draw.io の図を生成・編集できるようにする MCP（Model Context Protocol）サーバーです。

自己完結型 — HTTP サーバーを内蔵しており、外部依存関係は不要です。

クイックスタート

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

インストール

Claude Desktop

Claude Desktop の設定ファイル（macOS の場合は ~/Library/Application Support/Claude/claude_desktop_config.json）に追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

VS Code

VS Code の設定（ワークスペース内の .vscode/mcp.json またはユーザー設定）に追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cursor

Cursor の MCP 設定（~/.cursor/mcp.json）に追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cline（VS Code 拡張機能）

1. Cline のトップメニューバーにある MCP Servers アイコンをクリックします
2. Configure タブを選択します
3. Configure MCP Servers をクリックして cline_mcp_settings.json を編集します
4. drawio サーバーを追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

その他の MCP クライアント

次の標準 MCP 設定を使用します。

• コマンド: npx
• 引数: ["@next-ai-drawio/mcp-server@latest"]

使用方法

1. 設定を更新した後、MCP クライアントを再起動します
2. AI に図の作成を依頼します。

   「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」

3. 図がリアルタイムでブラウザに表示されます！

機能

• リアルタイムプレビュー：AI が図を作成すると、ブラウザに表示され、更新されます
• バージョン履歴：視覚的なサムネイルを使って以前の図のバージョンを復元できます。右下の時計ボタンをクリックすると、以前の状態を確認して復元できます
• 自然言語：フローチャートやアーキテクチャ図などを、平易なテキストで説明して作成できます
• 編集サポート：自然言語の指示で既存の図を変更できます
• エクスポート：図を .drawio ファイルとして保存できます
• 自己完結型：サーバーを内蔵しており、オフラインで動作します（デフォルトでは embed.diagrams.net から読み込む draw.io UI を除きます。DRAWIO_BASE_URL で設定できます）

利用可能なツール

ツール	説明
start_session	リアルタイムの図のプレビューを表示するブラウザを開きます
create_new_diagram	XML から新しい図を作成します（xml 引数が必要です）
edit_diagram	ID ベースの操作で図を編集します（セルの更新／追加／削除）
get_diagram	現在の図の XML を取得します
export_diagram	図を .drawio ファイルに保存します

動作の仕組み

┌─────────────────┐     stdio      ┌─────────────────┐
│  Claude Desktop │ <───────────> │   MCP Server    │
│    (AI Agent)   │               │  (this package) │
└─────────────────┘               └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │ Embedded HTTP   │
                                 │ Server (:6002)  │
                                 └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │  User's Browser │
                                 │ (draw.io embed) │
                                 └─────────────────┘

1. MCP サーバーが stdio 経由で Claude からのツール呼び出しを受け取ります
2. 内蔵 HTTP サーバーが draw.io UI を配信し、状態を処理します
3. ブラウザがポーリング経由でリアルタイムの図の更新を表示します

設定

変数	デフォルト値	説明
PORT	6002	内蔵 HTTP サーバーのポート
DRAWIO_BASE_URL	https://embed.diagrams.net	draw.io 埋め込みのベース URL です。プライベート環境でセルフホストの draw.io インスタンスを使用する場合に設定します。

プライベート環境へのデプロイ（セルフホストの draw.io）

draw.io のプライベート環境へのデプロイが必要な、セキュリティ要件の厳しい環境の場合：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { 
        "DRAWIO_BASE_URL": "https://drawio.your-company.com"
      }
    }
  }
}

公式 Docker イメージを使用して、独自の draw.io インスタンスをデプロイできます。

docker run -d -p 8080:8080 jgraph/drawio

次に、DRAWIO_BASE_URL=http://localhost:8080（またはサーバーの URL）を設定します。

トラブルシューティング

ポートがすでに使用されています

ポート 6002 が使用中の場合、サーバーは次に利用可能なポートを自動的に試します（最大 6020）。

または、カスタムポートを設定します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { "PORT": "6003" }
    }
  }
}

「アクティブなセッションがありません」

まず start_session を呼び出して、ブラウザーウィンドウを開いてください。

ブラウザが更新されない

ブラウザの URL に ?mcp= クエリパラメーターが含まれていることを確認してください。MCP セッション ID によって、ブラウザとサーバーが接続されます。

ライセンス

Apache-2.0