Excalidraw Sidecar MCP

排除侧车MCP

Excalidraw Sidecar MCP 是一个远程 MCP 服务器，让外部 LLM 通过 HTTP 创建 Excalidraw 图表。提供浏览器实时查看与编辑、服务端 SVG 渲染。API 参考见 docs/remote-mcp-api.md。

Demo

部署

有关部署说明（先决条件、构建、生产），请参阅 部署.md.

CLI标志

基本工作流程

每个绘图任务都遵循一个三步工作流程：

flowchart LR
    A["1. create_session\nGet session key\n+ viewer URL"] --> B["2. read_me\nLearn element\nformat & colors"]
    B --> C["3. create_view\nSend elements JSON\nget SVG + link"]
    A -.->|Share viewer URL| User["User opens viewer"]

步骤1：创建会话

打电话给 create_session 工具。它返回：

• 会话密钥 --在所有后续工具调用中使用
• 查看器URL --与用户共享此信息，以便他们可以在浏览器中打开图表

重要提示： 创建会话后，始终立即告诉用户查看器URL。在开始绘图之前，他们应该在浏览器中打开它，这样他们就可以实时查看图表。

步骤2：读取元素格式参考

呼叫 read_me 在你第一次之前 create_view。它返回一个备忘单，其中包含：

• 支持的元素类型(rectangle, ellipse, diamond, text, arrow)
• 带十六进制代码的调色板
• 坐标系和尺寸惯例
• 完整的JSON示例

第三步：绘制图表

呼叫 create_view 使用会话密钥和Excalidraw元素的JSON数组。它返回：

• 一 SVG图像 渲染图的预览
• A. 检查点ID 稍后进行增量编辑

要更新图表，请调用 create_view 再次与a restoreCheckpoint 引用和新/修改的元素——无需重新发送所有内容。

查看和编辑

步骤1中URL处的查看器页面支持：

• 实时更新 --页面每5秒轮询一次更改
• 平移和缩放 --拖动以平移，滚动以缩放，双击以重置
• 交互式编辑 --点击“编辑图表”打开完整的Excalidraw编辑器；当您单击“完成编辑”时，更改会同步回来

______________________________________________________________________

连接LLM

克劳德桌面版

添加 claude_desktop_config.json:

{
  "mcpServers": {
    "excalidraw": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

Claude Desktop通过MCP Streamable HTTP连接。不需要API密钥或身份验证。

重新启动Claude Desktop，然后问：

“绘制一个架构图，显示负载均衡器路由到连接到共享数据库的3个微服务”

克劳德会打电话的 create_session → read_me → create_view 并返回带有查看器链接的SVG图像。

克劳德桌面（stdio模式）

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

克劳德代码（CLI）

使用附带的技能：

# Via the /draw skill command (if installed)
/draw http://localhost:3001

# Or via the CLI helper directly
node excalidraw-mcp/skill/scripts/mcp-client.mjs --server http://localhost:3001 create-session

您还可以在项目根目录创建配置文件，或者 ~/.excalidraw-mcp.json:

{
  "server": "http://localhost:3001"
}

其他MCP客户端

任何客户支持 MCP流式HTTP 可以连接到 http://:3001/mcp。有关协议握手的详细信息，请参阅 docs/remote-mcp-api.md.

______________________________________________________________________

用法

CLI工具

包括 skill/scripts/mcp-client.mjs 将MCP协议握手封装为简单的命令。Node.js 18+之外的零依赖。

设置：

# Option A: Pass server URL each time
node skill/scripts/mcp-client.mjs --server http://localhost:3001 

# Option B: Create a config file (searched in cwd then home dir)
echo '{"server": "http://localhost:3001"}' > .excalidraw-mcp.json
node skill/scripts/mcp-client.mjs 

命令：

# Create a 24h drawing session
node mcp-client.mjs create-session
# → Session key: "abc-123-..."
# → Viewer URL: http://localhost:5173/view/abc-123-...

# Get element format reference (call once before first draw)
node mcp-client.mjs read-me

# Draw elements from a JSON file
node mcp-client.mjs create-view  elements.json

# Draw elements from stdin
echo '[{"type":"rectangle","id":"r1","x":0,"y":0,"width":200,"height":100}]' \
  | node mcp-client.mjs create-view  -

# Get current view (includes user edits from browser)
node mcp-client.mjs get-view 

# Replace all elements via REST API
node mcp-client.mjs update-elements  new-elements.json

# Delete specific elements by ID
node mcp-client.mjs delete-elements  id1,id2,id3

# Restore from a checkpoint, optionally adding new elements
node mcp-client.mjs restore-checkpoint   [extra.json]

# Check session status
node mcp-client.mjs session-info 

浏览器查看器

打开MCP工具返回的查看器URL（例如。 http://localhost:3001/view/ 采用单域部署，或 http://localhost:5173/view/ 在开发模式下）：

• 查看渲染为SVG的当前图表
• 潘 --单击并拖动以在图表中移动
• 变焦 --滚轮可放大/缩小；右下角显示的百分比徽章
• 重置 --双击以重置以适应所有视图
• 点击 编辑图表 打开完整的Excalidraw编辑器
• 交互式编辑形状、文本、箭头
• 单击时，更改会自动同步回服务器 编辑完成
• 页面每5秒轮询一次外部更新

克劳德代码技能

复制 skill/ 目录到你的克劳德代码技能，以获得 /draw 命令：

cp -r skill/ /path/to/your/project/.claude/skills/draw/

然后使用：

/draw http://localhost:3001

看 技能/技能.md 获取完整的使用指南。

______________________________________________________________________

MCP工具

REST API

有关API的完整文档，请参阅 docs/remote-mcp-api.md.

积分

许可证

麻省理工学院