AI Diagram Maker MCP

官方

AI Diagram Maker 的 MCP 伺服器 — 直接在 Cursor、Claude Desktop、Claude Code 或任何相容 MCP 的 AI 代理中生成精美的軟體工程圖表。

GitHub

文件

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 直接顯示在對話中，無需下載
回應中的圖表網址 — 在瀏覽器中開啟以檢視和編輯圖表
5 種圖表類型：流程圖、循序圖、ERD、系統架構圖、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（建議用於一次性執行和 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"
      }
    }
  }
}

可選：將 "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 的覆寫；也用作工具回應中圖表網址的基礎
`ADM_DEBUG`	否	—	設定為 `1`、`true` 或 `yes`，以記錄來自 AI 代理的請求參數以及傳送到 AI Diagram Maker API 的酬載。記錄輸出到 stderr。在 Cursor 中，開啟輸出，選擇 MCP 或 ai-diagram-maker 頻道以讀取伺服器記錄。

工具

`generate_diagram_from_text`

從自然語言描述生成圖表。

參數	類型	必要	描述
`content`	字串	是	圖表的自然語言描述
`diagramType`	列舉	否	flowchart、sequence、erd、system_architecture、uml
`prompt`	字串	否	額外的樣式/佈局指示

提示範例：

"建立一個包含 API 閘道、驗證服務、使用者服務和 PostgreSQL 資料庫的微服務架構"
"繪製一個包含 JWT 權杖生成的使用者登入流程循序圖"
"adm 顯示部署到 Vercel 的 Next.js 應用程式的 CI/CD 管線"

`generate_diagram_from_json`

將 JSON 結構轉換為圖表（非常適合 API 回應、資料庫結構描述、設定檔）。

參數	類型	必要	描述
`content`	字串	是	要視覺化的 JSON 字串
`prompt`	字串	否	如何解讀 JSON
`diagramType`	列舉	否	偏好的圖表類型

`generate_diagram_from_ascii`

將 ASCII 藝術轉換為精美的圖表。

參數	類型	必要	描述
`content`	字串	是	原始 ASCII 藝術圖表
`prompt`	字串	否	渲染指示
`diagramType`	列舉	否	偏好的圖表類型

`generate_diagram_from_image`

將白板照片、螢幕截圖或任何圖片轉換為清晰的圖表。

參數	類型	必要	描述
`content`	字串	是	公開圖片網址或 base64 資料 URI
`prompt`	字串	否	要擷取的內容或渲染方式
`diagramType`	列舉	否	偏好的輸出圖表類型

`generate_diagram_from_mermaid`

將 Mermaid 圖表定義轉換為 D2 並回傳 PNG 圖片。

參數	類型	必要	描述
`content`	字串	是	Mermaid 圖表原始碼（例如 flowchart、sequenceDiagram、erDiagram）
`prompt`	字串	否	可選的佈局或樣式指示
`diagramType`	列舉	否	轉換後輸出的偏好圖表類型

觸發關鍵字

當您使用類似以下的短語時，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 中使用本機伺服器

透過 設定 → 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