AI导哈

Excalidraw MCP 服务器

一个支持安全加固、内联图表渲染和实时画布同步的Excalidraw MCP服务器，适用于AI绘图和协作编辑场景。

  • by debu-sinha
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 debu-sinha/excalidraw-mcp-server

使用说明

excalidraw mcp服务器

唯一具有安全强化、内联图渲染和实时画布同步功能的Excalidraw MCP服务器。

它的作用

让你的人工智能绘制一个图表，它就会出现在聊天中。MCP服务器为Claude Desktop、ChatGPT、VS Code和Cursor提供了一整套由Excalidraw格式支持的绘图工具，并对每个操作进行API身份验证、速率限制和输入验证。

v2.0添加 MCP应用程序支持：图表作为带有绘图动画的交互式SVG小部件内联流，您可以一键将任何图表导出到excalidraw.com。

两种模式，零配置

独立模式 （默认）--只需安装并运行即可。服务器使用进程内元素存储运行。没有画布服务器，没有API键，没有设置。您的MCP客户端调用这些工具，图表将内联呈现。

已连接模式 --启动可选的canvas服务器进行实时浏览器同步。多个客户端可以通过经过身份验证的WebSocket连接在同一画布上进行协作。文件持久性在重新启动时保持状态。

服务器会自动检测使用哪种模式：如果画布服务器可访问，则会连接到它。否则，它会回退到独立模式。

建筑

使用excalidraw mcp服务器创建的图表-- 在Excalidraw中编辑

特性

MCP应用程序（v2.0）

  • Claude Desktop、ChatGPT和VS Code中的内联图渲染
  • 当元素到达时，通过绘制动画流式传输SVG
  • 一键导出到excalidraw.com
  • 元素参考备忘单通过 read_me 工具

16个MCP工具

  • 创建、更新、删除和查询元素（矩形、椭圆、菱形、箭头、文本、直线、自由绘制）
  • 一次批量创建多达100个元素
  • 分组、取消分组、对齐、分配、锁定、解锁
  • 美人鱼图转换
  • SVG和PNG导出

安全

  • 具有恒定时间比较的API密钥认证
  • 源受限CORS（无通配符）
  • 带有令牌和源验证的WebSocket身份验证
  • 标准和严格的限速等级
  • 有界Zod模式 .strict() 在每个端点上
  • 带有CSP的Helmet.js安全标头

基础设施

  • 跨浏览器客户端的实时WebSocket同步
  • 可选的原子写入文件持久性
  • 结构化pino审计日志记录

安装

npm install -g excalidraw-mcp-server

或者直接运行：

npx excalidraw-mcp-server

快速开始

独立（建议大多数用户使用）

只需将MCP客户端指向服务器即可。不需要画布服务器。

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["excalidraw-mcp-server"]
    }
  }
}

然后问你的AI： 绘制一个架构图，显示负载均衡器、三个应用服务器和一个数据库

连接模式（实时浏览器同步）

# Generate an API key
node scripts/generate-api-key.cjs

# Start the canvas server
EXCALIDRAW_API_KEY=<your-key> npm run canvas

# Open http://localhost:3000 to see the live canvas

使用相同的API密钥将MCP客户端指向服务器：

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["excalidraw-mcp-server"],
      "env": {
        "EXCALIDRAW_API_KEY": "<your-key>",
        "CANVAS_SERVER_URL": "http://127.0.0.1:3000"
      }
    }
  }
}

MCP工具

工具 说明
create_view 将元素渲染为具有流式动画的内联SVG小部件（MCP应用程序）
read_me 获取元素参考备忘单（类型、颜色、尺寸提示）
create_element 创建单个元素（矩形、椭圆、菱形、箭头、文本、直线、自由绘制）
update_element 按ID更新现有元素
delete_element 按ID删除元素
query_elements 按类型、锁定状态或组ID搜索元素
get_resource 获取场景状态、所有元素、主题或库
batch_create_elements 在一次调用中创建多达100个元素
group_elements 将多个元素组合在一起
ungroup_elements 从组中删除元素
align_elements 对齐元素（左、中、右、上、中、下）
distribute_elements 均匀分布元素（水平或垂直）
lock_elements 锁定元件以防止修改
unlock_elements 解锁元素
create_from_mermaid 将Mermaid图转换为Excalidraw元素
export_scene 将画布导出为SVG或PNG

安全性比较

功能 典型的MCP服务器 excalidraw MCP服务器
身份验证 无 API密钥（恒定时间比较）
CORS * 通配符 源代码列表
WebSocket身份验证 无 令牌+来源验证
费率限制 无 标准+严格等级
输入验证 最小 有界Zod .strict()
安全标头 无 Helmet.js+CSP
请求大小限制 无 512KB正文，1MB WebSocket
审计日志 无 结构化pino日志

配置

所有设置均通过环境变量进行。复制 .env.example 到 .env 并根据需要进行调整。

变量 默认值 描述
STANDALONE_MODE true 使用进程内存储（不需要画布服务器）
CANVAS_HOST 127.0.0.1 Canvas服务器绑定地址
CANVAS_PORT 3000 Canvas服务器端口
EXCALIDRAW_API_KEY 为身份验证自动生成 API密钥（至少32个字符）
CORS_ALLOWED_ORIGINS http://localhost:3000,http://127.0.0.1:3000 逗号分隔的同源列表
RATE_LIMIT_WINDOW_MS 60000 速率限制窗口（毫秒）
RATE_LIMIT_MAX_REQUESTS 100 每个窗口的最大请求数（标准层）
PERSISTENCE_ENABLED false 启用基于文件的持久性
PERSISTENCE_DIR ./data 持久存储目录
CANVAS_SERVER_URL http://127.0.0.1:3000 MCP服务器用于访问画布的URL
LOG_LEVEL info 日志级别：调试、信息、警告、错误
AUDIT_LOG_ENABLED true 启用审核日志记录
MAX_ELEMENTS 10000 画布上的最大元素数
MAX_BATCH_SIZE 100 每批创建的最大元素数

MCP客户端配置

克劳德桌面版

增添 claude_desktop_config.json:

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["excalidraw-mcp-server"]
    }
  }
}

光标

增添 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["excalidraw-mcp-server"]
    }
  }
}

VS Code

添加到MCP设置中：

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["excalidraw-mcp-server"]
    }
  }
}

对于连接模式，添加 "env": { "EXCALIDRAW_API_KEY": "<key>", "CANVAS_SERVER_URL": "http://127.0.0.1:3000" } 到上面的配置。替换 <key> 钥匙从 node scripts/generate-api-key.cjs.

发展

# Install dependencies
npm ci

# Run in development mode (watch + Vite dev server)
npm run dev

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Lint
npm run lint

# Type check
npm run type-check

# Build (server + widget + frontend)
npm run build

项目结构

src/
  mcp/              MCP server (stdio transport)
    tools/          16 tool implementations
    apps/           MCP Apps wiring, standalone store, cheatsheet
    schemas/        Zod schemas and input limits
    canvas-client.ts  HTTP client for canvas server
    index.ts        MCP server entry point
  canvas/           Canvas server (Express + WebSocket)
    middleware/      Auth, CORS, rate limiting, audit, security headers
    routes/         REST API routes + SVG export
    ws/             WebSocket handler and protocol
    store/          Element storage (memory + file)
    index.ts        Canvas server entry point
  shared/           Shared config, types, logging
widget/             MCP Apps inline widget (Vite + singlefile build)
frontend/           Excalidraw React frontend (browser)
test/               Unit and integration tests (290 tests)

从v1.x迁移

零配置升级。所有14个原装工具的工作原理相同-- create_view 和 read_me 是添加剂。画布服务器现在是可选的（独立模式会自动激活）。

npm install -g excalidraw-mcp-server@2

现有的MCP客户端配置（stdio传输、工具名称）继续工作，没有更改。

许可证

麻省理工学院

相关 MCP