Ai Diagram Maker Mcp Server

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 種類の図：フローチャート、シーケンス図、ERD、システムアーキテクチャ、UML
• stdio（ローカル）とHTTP／Streamable HTTP（リモート）の両トランスポートに対応

目次

• 前提条件
• ホスト型 MCP サーバー
• インストール
• MCP クライアントの設定
• 環境変数
• ツール
• トリガーキーワード
• ローカル開発環境のセットアップ
• ライセンス

前提条件

1. Node.js 18+
2. 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 を追加してください（単発実行や claude mcp add での使用に推奨）。

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

MCP クライアントの設定

Cursor

リモート（推奨）

リモートサーバーの JSON 例を使って、~/.cursor/mcp.json または 設定 → MCP に追加してください。この設定では環境変数は不要です。

ローカル（stdio）

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

任意：デバッグログを有効にするには、env に "ADM_DEBUG": "1" を追加してください。環境変数を参照してください。

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 サーバーを再読み込みしてください。

デバッグログを有効にするには、env に "ADM_DEBUG": "1" を追加してください。環境変数を参照してください。

ライセンス

MIT