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

一个快速可流式传输的MCP服务器，使AI客户端能够在聊天中直接生成并渲染交互式手绘Excalidraw图表，并具有流畅的视口相机控制和全屏编辑功能。

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

Excalidraw MCP 应用服务器

快速且可流式传输的 Excalidraw MCP 应用 — 直接在您的 AI 聊天客户端中生成精美的绘图风格图表。

📌 概述

Excalidraw MCP 是由 Excalidraw 团队构建的开源模型上下文协议 (MCP) 服务器。它通过允许 AI 客户端（如 Claude、ChatGPT、VS Code、Goose 等）生成和渲染由 Excalidraw 驱动的交互式、手绘风格图表，从而弥合了 AI 语言模型与视觉图表之间的差距——所有这些都在聊天界面本身内完成。

该 MCP 服务器不会仅仅返回图表的文本描述，而是将交互式 HTML 画布流式传输回客户端，并带有流畅的视口相机控制和全屏编辑模式。

✨ 主要功能

  • 可流式传输的图表: 将图表作为实时、交互式 HTML 返回，直接在聊天窗口中渲染——而非静态图像。
  • 手绘美学: 为所有生成的图表利用 Excalidraw 标志性的草图、手绘视觉风格。
  • 流畅的相机控制: 支持视口平移和缩放，以便用户可以舒适地浏览大型图表。
  • 全屏编辑: 用户可以在全屏编辑器中打开生成的图表，以便在 AI 生成后进行手动调整。
  • MCP 应用标准: 基于官方 MCP 应用扩展构建，该扩展允许服务器返回丰富的交互式 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 (serverless) 提供服务，并使用 Vite 进行前端打包。它遵循 MCP 应用协议，将完整的 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 风格的 serverless)
部署 Vercel
协议 模型上下文协议 (MCP) + MCP 应用扩展

🌐 自托管 / 部署

您可以在几分钟内将自己的实例部署到 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