drawx-mcp-server

@drawx/mcp-server

Claude、Cursor、または VS Code 内から draw.io の図やアーキテクチャ設計を生成できます。

DrawX MCP は、AI アシスタントに次の 3 つのツールを提供するModel Context Protocolサーバーです。

• generate_diagram — 一度の操作で、自然言語のプロンプトから完成した draw.io XML を生成します。
• architect_design — 概要から高レベル設計（HLD）の図を作成します（オプションで LLD と設計ドキュメントも作成できます）。
• whoami — API キーを検証し、残りのクォータを確認します。

内部では DrawX の公開 API を呼び出すため、出力は DrawX のウェブアプリと完全に一致します。

---

要件

• Node.js 18 以降
• DrawX API キー — DrawX → Settings → API keys で作成してください。キーは drawx_live_ で始まります。API アクセスは有料機能です（DrawX Pro プランに含まれます）。

インストール

npm install -g @drawx/mcp-server

MCP クライアントが npx に対応している場合は、インストールせずに npx @drawx/mcp-server を直接指定できます。

MCP クライアントの設定

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json（macOS）または %APPDATA%\Claude\claude_desktop_config.json（Windows）を編集します。

{
  "mcpServers": {
    "drawx": {
      "command": "npx",
      "args": ["-y", "@drawx/mcp-server"],
      "env": {
        "DRAWX_API_KEY": "drawx_live_..."
      }
    }
  }
}

Claude Desktop を再起動します。新しいチャットで 「マイクロサービスのチェックアウトフローを描いて」 と尋ねると、Claude が generate_diagram を呼び出し、生成された XML を表示します。

Cursor

~/.cursor/mcp.json を編集します。

{
  "mcpServers": {
    "drawx": {
      "command": "npx",
      "args": ["-y", "@drawx/mcp-server"],
      "env": { "DRAWX_API_KEY": "drawx_live_..." }
    }
  }
}

VS Code（Copilot MCP）

ワークスペースまたはユーザーの settings.json に追加します。

{
  "mcp": {
    "servers": {
      "drawx": {
        "command": "npx",
        "args": ["-y", "@drawx/mcp-server"],
        "env": { "DRAWX_API_KEY": "drawx_live_..." }
      }
    }
  }
}

---

環境変数

変数	必須	用途
DRAWX_API_KEY	はい	DrawX API キー（drawx_live_...）。
DRAWX_API_BASE	いいえ	API のベース URL を上書きします（デフォルトは https://getdrawx.com/api/v1）。ステージング環境で便利です。

ツールのリファレンス

generate_diagram

説明文から draw.io XML を生成します。

入力

• prompt（string、必須）— 描画する内容です。
• mode — "flash"（デフォルト）、"pro"、または "ultra"。速度と品質のバランスを調整します。
• previousXml — 変更する既存の mxfile です。

出力 — アシスタントのテキストとして、モデル、トークン数、コストを示す概要行に続き、完全な <mxfile>...</mxfile> XML がコードフェンス内に表示されます。XML を diagrams.net に貼り付けるか、.drawio として保存してください。

architect_design

概要をもとに DrawX Architect Co-Pilot を実行します。途中経過をストリーミングし、hld（および任意の lld、doc）を含む JSON ペイロードを返します。

入力

• brief（string、必須、20 文字以上）— 設計する内容です。
• depth — "hld"、"hld_lld"（デフォルト）、または "hld_lld_doc"。
• style — "cloud_agnostic"（デフォルト）、"aws"、"azure"、または "gcp"。
• mode — "flash"（デフォルト）、"pro"、または "ultra"。

whoami

入力はありません。メールアドレス、プラン、API ティア、月間 API クォータの残りを返します。

クォータとレート制限

API の使用量は、アプリ内の使用量とは別のティアで計測されます。Pro の契約者は月 200 回の API 呼び出しが可能です。レート制限は 1 分あたり 60 リクエストです。無料プランでは API にアクセスできません。getdrawx.com でアップグレードしてください。

ローカル開発

git clone https://github.com/SaharshPamecha/drawx-mcp-server
cd drawx-mcp-server
npm install
npm run build
DRAWX_API_KEY=drawx_live_... node dist/index.js  # runs over stdio; use an MCP inspector
npm test

ライセンス

MIT © 2026 DrawX