/ 目錄 / 演練場 / Excalidraw Architect MCP
● 社群 BV-Venky ⚡ 即開即用

Excalidraw Architect MCP

作者 BV-Venky · BV-Venky/excalidraw-architect-mcp

用自然語言描述一個系統,取回一張排版整齊的 Excalidraw 圖表——自動佈局,可直接嵌入文件。

Excalidraw Architect MCP 將自然語言架構描述轉換為 Excalidraw .json(以及可選的 PNG,需要 cairo)。智慧佈局引擎處理間距和箭頭路由,讓圖表不像被龍捲風掃過。非常適合腦中有方塊和箭頭卻討厭手動拖拉圖形的工程師。

為什麼要用

核心特性

即時演示

實際使用效果

excalidraw-architect-mcp.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Excalidraw Architect MCP

為設計文件產生架構圖

👤 撰寫設計文件的工程師 ⏱ ~10 min beginner

何時使用: 你的設計文件需要一張系統圖,但不想在 Excalidraw 花一個小時。

前置條件
  • Excalidraw(網頁版或桌面版) — excalidraw.com——貼入 .json 輸出
步驟
  1. 描述
    生成一張 Excalidraw 圖:API gateway → auth service → user service 與 orders service → Postgres。在 API 和 user service 之間加上 Redis cache。✓ 已複製
    → 已回傳 Excalidraw .json
  2. 精修
    在每個服務上加上旁路日誌代理。將服務分組到一個「core」叢集中。✓ 已複製
    → 更新後的圖含叢集與旁路代理
  3. 匯出
    以 3 倍解析度渲染為 PNG 並儲存到 /docs/arch.png。✓ 已複製
    → PNG 已寫入

結果: 2 分鐘內產出可放入文件的圖表,而非花費 30 分鐘。

注意事項
  • 節點太多——圖表變得無法閱讀 — 先要求叢集和更高抽象層次的表示
搭配使用: filesystem

視覺化程式碼庫中的呼叫流程

👤 審查陌生程式碼的工程師 ⏱ ~5 min beginner

何時使用: 你單步執行了一個請求——現在想要一張圖。

步驟
  1. 描述你看到的
    繪製請求流程:HTTP handler → validator → service → repo → DB。顯示驗證錯誤路徑的分支。✓ 已複製
    → 序列式圖表

結果: 在你的 PR 描述中,一張圖勝過 200 個字。

注意事項
  • 序列圖與方塊箭頭圖的混淆 — 明確說明——「序列圖」或「元件圖」

組合

與其他 MCP 搭配,撬動十倍槓桿

excalidraw-architect-mcp + filesystem

在設計文件旁儲存版本化圖表

將 .excalidraw.json 儲存在文件旁,並重新渲染到 /docs/arch.png。✓ 已複製
excalidraw-architect-mcp + github

將圖表附加到 PR 描述

生成圖表並將 PNG 嵌入 PR #1234 的描述中。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
generate_diagram description, layout? 從提示初始生成圖表 免費
modify_diagram json, instruction 迭代修改 免費
to_png json, scale? 嵌入文件 免費

成本與限制

運行它的成本

API 配額
本機執行——無配額
每次呼叫 Token 數
300–2000
費用
免費
提示
透過 modify_diagram 迭代,而非從頭重新生成

安全

權限、密鑰、影響範圍

最小權限: 本機檔案寫入
憑證儲存:
資料出站: 無——完全本機

故障排查

常見錯誤與修復

PNG 匯出失敗

安裝選用的 cairo 依賴:pip install excalidraw-architect-mcp[png]

佈局看起來很擁擠

要求叢集分組或縮小節點集合

Excalidraw 拒絕匯入

JSON schema 可能略有偏差;請 Claude 對照最新 Excalidraw schema 進行驗證

替代方案

Excalidraw Architect MCP 對比其他方案

替代方案何時用它替代權衡
透過 mermaid MCP 使用 Mermaid你想要以文字為主、可納入版本控制的圖表視覺客製化程度較低
在 Excalidraw 中手繪你喜歡這樣做而且有時間速度慢

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills