excalidraw/excalidraw-mcp View GitHub Homepage for Latest Official Releases

一個快速且可串流的MCP伺服器，讓AI客戶端能夠生成並渲染互動式手繪Excalidraw圖表，具有流暢的視窗攝影機控制，並直接在聊天中進行全螢幕編輯。

TypeScriptexcalidraw-mcpexcalidraw 2.7k Last Updated: February 20, 2026

Excalidraw MCP App 伺服器

快速且可串流的 Excalidraw MCP App — 直接在您的 AI 聊天客戶端中生成精美的繪圖風格圖表。

📌 總覽

Excalidraw MCP 是由 Excalidraw 團隊建置的開源模型上下文協定 (MCP) 伺服器。它透過允許 AI 客戶端（例如 Claude、ChatGPT、VS Code、Goose 等）生成和渲染由 Excalidraw 驅動的互動式、手繪風格圖表，來彌合 AI 語言模型與視覺圖表之間的差距 — 所有這些都在聊天介面本身內完成。

此 MCP 伺服器不會僅僅回傳圖表的文字描述，而是將互動式 HTML 畫布串流回客戶端，並具備流暢的視口攝影機控制和全螢幕編輯模式。

✨ 主要功能

  • 可串流圖表: 將圖表作為即時、互動式 HTML 回傳，直接在聊天視窗中渲染 — 非靜態圖片。
  • 手繪美學: 為所有生成的圖表運用 Excalidraw 標誌性的草圖、手繪視覺風格。
  • 流暢的攝影機控制: 支援視口平移和縮放，讓使用者可以舒適地探索大型圖表。
  • 全螢幕編輯: 使用者可以在全螢幕編輯器中開啟生成的圖表，以便在 AI 生成後進行手動調整。
  • MCP Apps 標準: 建置於官方 MCP Apps 擴充功能之上，該擴充功能使伺服器能夠回傳豐富的互動式 UI 組件，而非純文字。
  • 多客戶端支援: 可與任何 MCP 相容的客戶端配合使用 — Claude、ChatGPT、VS Code Copilot、Goose 等。
  • 輕鬆部署: 一鍵部署到 Vercel，無需環境變數。

🏗️ 架構

使用者提示 (例如：「繪製一個架構圖」)
        │
        ▼
  AI 客戶端 (Claude / ChatGPT / VS Code)
        │  MCP 協定
        ▼
  Excalidraw MCP 伺服器 (Node.js / TypeScript)
        │  串流互動式 HTML
        ▼
  Excalidraw 畫布 (在聊天 UI 中渲染)
        │
        ▼
  使用者即時查看和編輯圖表

該伺服器以 TypeScript 編寫，透過 Vercel (無伺服器) 提供服務，並使用 Vite 進行前端打包。它遵循 MCP Apps 協定，將完整的 Excalidraw 畫布嵌入為互動式成品回應。

🚀 開始使用

選項 1：遠端 (建議)

無需安裝。將以下 URL 添加為您客戶端中的遠端 MCP 伺服器：

https://excalidraw-mcp-app.vercel.app/mcp

Claude.ai 範例: 設定 → 連接器 → 添加自訂連接器 → 貼上 URL。

選項 2：透過擴充功能檔案在本機端執行

  1. 從 Releases 頁面下載 excalidraw-mcp-app.mcpb。
  2. 在 Claude Desktop 中雙擊進行安裝。

選項 3：從原始碼建置

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp
npm install && npm run build

然後將以下內容添加到您的 Claude Desktop 設定檔 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/path/to/excalidraw-mcp/dist/index.js", "--stdio"]
    }
  }
}

重新啟動 Claude Desktop 即可準備就緒。

💬 範例提示

連接後，您可以使用自然語言提示，例如：

  • "使用 Excalidraw 繪製一隻可愛的貓"
  • "繪製一個架構圖，顯示使用者連接到與資料庫通訊的 API 伺服器"
  • "建立一個 CI/CD 管線的流程圖"
  • "繪製一個包含 3 台伺服器和一個負載平衡器的網路拓撲圖"

AI 將呼叫 MCP 伺服器，該伺服器會生成圖表並將其作為互動式畫布串流回聊天中。

🛠️ 技術堆疊

層級 技術
語言 TypeScript (90.1%), JavaScript (4.7%)
前端 Excalidraw, Vite, CSS
後端 Node.js (Express 風格無伺服器)
部署 Vercel
協定 模型上下文協定 (MCP) + MCP Apps 擴充功能

🌐 自我託管 / 部署

您可以在幾分鐘內將您自己的執行個體部署到 Vercel：

  1. Fork 儲存庫。
  2. 前往 vercel.com/new 並匯入您的 fork。
  3. 無需環境變數 — 只需點擊部署。
  4. 您的伺服器將可透過 https://your-project.vercel.app/mcp 存取。

🤝 貢獻

歡迎提交 PR！該專案由 Excalidraw 團隊和社群貢獻者積極維護。若要貢獻：

  1. Fork 儲存庫並在本機端複製。
  2. 執行 npm install && npm run build 以設定開發環境。
  3. 進行您的變更並提交一個拉取請求。

🔗 相關資源

🏷️ 摘要

MCP — 這是一個基於模型上下文協定建置的 MCP 伺服器，使 AI 客戶端能夠直接在聊天介面中生成 Excalidraw 手繪風格圖表並進行互動式編輯。

Star History Chart