AI Diagram Maker MCP

公式

AI Diagram Maker用のMCPサーバー — Cursor、Claude Desktop、Claude Code、またはMCP互換のAIエージェント内で直接美しいソフトウェアエンジニアリング図を生成します

GitHub

AI Diagram Maker MCPで何ができますか？

平易な英語から図を生成 — システムやフローを自然言語で記述し、generate_diagram_from_text を使用して洗練された図を作成します。
JSONデータを視覚的な図に変換 — JSON文字列（APIレスポンス、スキーマ、設定など）を generate_diagram_from_json に渡し、図としてレンダリングします。
ASCIIアートをクリーンな図に変換 — 生のASCIIアートを generate_diagram_from_ascii に渡し、プロフェッショナルな外観の図を生成します。
画像から図を作成 — ホワイトボードの写真やスクリーンショットのURL/base64を generate_diagram_from_image に提供し、整理された図を受け取ります。
Mermaid定義を図としてレンダリング — Mermaidソースを generate_diagram_from_mermaid に渡し、レンダリングされた図に変換します。

ドキュメント

AI Diagram Maker MCP サーバー

AI Diagram Maker 用 MCP サーバー — Cursor、Claude Desktop、Claude Code、または任意の MCP 互換 AI エージェント内で、美しいソフトウェアエンジニアリング図を直接生成します。

ai-diagram-maker-mcp 🌐 ☁️ - 平易な英語の説明からプロフェッショナルなソフトウェア図を生成します。

機能

5 つのツール があらゆる入力タイプをカバー: 自然言語テキスト、コード、ASCII 図、画像、Mermaid
インラインレンダリング — MCP Apps UI を使用して図がチャット内に直接表示され、ダウンロード不要
レスポンスに図の URL — ブラウザで開いて図を表示・編集可能
5 種類の図タイプ: フローチャート、シーケンス図、ER 図、システムアーキテクチャ図、UML
stdio (ローカル) と HTTP/Streamable HTTP (リモート) 両方のトランスポートをサポート

前提条件

Node.js 18 以上
AI Diagram Maker のアカウントと API キー

ホスト型 MCP サーバー

公開 MCP エンドポイントは https://mcp.aidiagrammaker.com/mcp (Streamable HTTP)** です。このオプションではインストールは不要です。

認証 (HTTP)

リモート HTTP クライアントの場合、リクエストごとに API キーを送信してください — 環境変数経由ではありません:

X-ADM-API-Key: <your_api_key> (推奨)、または
Authorization: Bearer <your_api_key>

AI Diagram Maker アカウントの API キーを使用してください (前提条件を参照)。

リモートサーバー JSON の例

これをクライアントの MCP 設定にマージしてください (API キーのプレースホルダーを置き換えてください):

{
  "mcpServers": {
    "ai-diagram-maker": {
      "url": "https://mcp.aidiagrammaker.com/mcp",
      "headers": {
        "X-ADM-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

インストール

オプション A — ホスト型サーバー (推奨)

上記のリモートサーバー JSON の例を使用し、MCP クライアント設定に従ってクライアントに接続します。グローバルインストールは不要です。

オプション B — npx でローカル実行

永続的なインストールは不要です — npx が必要に応じてパッケージを実行します。パッケージ名は ai-diagram-maker-mcp です。毎回の呼び出しで最新リリースを解決したい場合は @latest を追加してください (1 回限りの実行や claude mcp add に推奨)。

ADM_API_KEY=your_api_key npx ai-diagram-maker-mcp@latest

MCP クライアント設定

Cursor

リモート (推奨)

リモートサーバー JSON の例を使用して ~/.cursor/mcp.json または Settings → MCP に追加します。このセットアップでは環境変数は不要です。

ローカル (stdio)

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

オプション: デバッグログのために "ADM_DEBUG": "1" を env に追加 — 環境変数を参照。

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) または %APPDATA%\Claude\claude_desktop_config.json (Windows) に追加:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Code

macOS

claude mcp add ai-diagram-maker -t stdio -e ADM_API_KEY=<api_key> -- npx -y ai-diagram-maker-mcp@latest

Windows

claude mcp add ai-diagram-maker \
  --command "npx" \
  --args "-y,ai-diagram-maker-mcp@latest" \
  --env ADM_API_KEY=your_api_key_here

HTTP トランスポート (ローカルまたはセルフホスト)

HTTP サーバーを自分で実行する場合 (認証 (HTTP) と同じヘッダーベースの認証):

npx ai-diagram-maker-mcp@latest --transport http

サーバーは $PORT または 3001 でリッスンします。クライアントは /mcp を指定し、上記のヘッダーを使用してリクエストごとに API キーを送信します。

環境変数

変数	必須	デフォルト	説明
`ADM_API_KEY`	はい (stdio のみ)	—	AI Diagram Maker API キー (stdio トランスポートのみ。リモート HTTP クライアントはヘッダーを使用 — 認証 (HTTP) を参照)
`ADM_BASE_URL`	いいえ	`https://app.aidiagrammaker.com`	ローカル/ステージング API のオーバーライド。ツールレスポンスの図 URL のベースとしても使用
`ADM_DEBUG`	いいえ	—	`1`、`true`、または `yes` に設定すると、AI エージェントからのリクエストパラメータと AI Diagram Maker API に送信されたペイロードをログに記録します。ログは stderr に出力されます。Cursor では、Output を開き、MCP または ai-diagram-maker チャネルを選択してサーバーログを読み取ります。

ツール

`generate_diagram_from_text`

自然言語の説明から図を生成します。

パラメータ	型	必須	説明
`content`	string	はい	図の自然言語による説明
`diagramType`	enum	いいえ	flowchart, sequence, erd, system_architecture, uml
`prompt`	string	いいえ	追加のスタイル/レイアウト指示

プロンプトの例:

"API ゲートウェイ、認証サービス、ユーザーサービス、PostgreSQL データベースを含むマイクロサービスアーキテクチャを作成"
"JWT トークン生成を含むユーザーログインフローのシーケンス図を描画"
"Vercel にデプロイされる Next.js アプリの CI/CD パイプラインを表示"

`generate_diagram_from_json`

JSON 構造を図に変換します (API レスポンス、データベーススキーマ、設定ファイルに最適)。

パラメータ	型	必須	説明
`content`	string	はい	可視化する JSON 文字列
`prompt`	string	いいえ	JSON の解釈方法
`diagramType`	enum	いいえ	推奨する図のタイプ

`generate_diagram_from_ascii`

ASCII アートを洗練された図に変換します。

パラメータ	型	必須	説明
`content`	string	はい	生の ASCII アート図
`prompt`	string	いいえ	レンダリング指示
`diagramType`	enum	いいえ	推奨する図のタイプ

`generate_diagram_from_image`

ホワイトボードの写真、スクリーンショット、または任意の画像をクリーンな図に変換します。

パラメータ	型	必須	説明
`content`	string	はい	公開画像 URL または base64 データ URI
`prompt`	string	いいえ	抽出またはレンダリング方法
`diagramType`	enum	いいえ	推奨する出力図のタイプ

`generate_diagram_from_mermaid`

Mermaid 図定義を D2 に変換し、PNG 画像を返します。

パラメータ	型	必須	説明
`content`	string	はい	Mermaid 図のソース (例: flowchart, sequenceDiagram, erDiagram)
`prompt`	string	いいえ	オプションのレイアウトまたはスタイル指示
`diagramType`	enum	いいえ	変換後の出力に推奨する図のタイプ

トリガーキーワード

以下のようなフレーズを使用すると、AI エージェントが自動的に適切なツールを選択します:

adm ...
ai diagram maker ...
create a diagram of ...
show me a flowchart / sequence diagram / ERD / architecture ...
visualise / draw / diagram ...

ローカル開発環境のセットアップ

以下の手順でリポジトリをクローンし、ローカルでビルドし、Node で MCP サーバーを実行します。

1. リポジトリのクローン

git clone https://github.com/erajasekar/ai-diagram-maker-mcp.git
cd ai-diagram-maker-mcp

2. 依存関係のインストール

npm install

3. (オプション) API クライアントの再生成

AI Diagram Maker の OpenAPI 仕様または設定を変更した場合、クライアントを再生成します:

npm run generate

4. ビルド

npm run build

これにより TypeScript がコンパイルされ、MCP アプリ UI が dist/ にビルドされます。サーバーのエントリポイントは dist/index.js です。

5. ローカル MCP サーバーの実行

stdio (デフォルト) — Cursor、Claude Desktop などで使用:

ADM_API_KEY=your_api_key node dist/index.js

または npm スクリプトを使用:

ADM_API_KEY=your_api_key npm start

HTTP トランスポート — リモートクライアントまたはテスト用 (認証 (HTTP) と同じヘッダー):

ADM_API_KEY=your_api_key node dist/index.js --transport http

または:

ADM_API_KEY=your_api_key npm run start:http

HTTP サーバーは $PORT (デフォルト 3001) でリッスンします。

6. Cursor でローカルサーバーを使用

Settings → MCP (または ~/.cursor/mcp.json) から、ビルドしたサーバーを Cursor に指定します:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "node",
      "args": ["/absolute/path/to/ai-diagram-maker-mcp/dist/index.js"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

/absolute/path/to/ai-diagram-maker-mcp を、クローンしたリポジトリの実際のパスに置き換えてください。設定変更後、Cursor を再起動するか、MCP サーバーをリロードします。

デバッグログについては、"ADM_DEBUG": "1" を env に追加 — 環境変数を参照。

ライセンス

MIT