AI导哈

Excalidraw图表生成服务

Excalidraw Sidecar MCP是一个远程服务器，允许外部LLM通过HTTP创建和编辑Excalidraw图表，支持浏览器实时查看和编辑以及服务端SVG渲染。

  • by anyin233
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 anyin233/excalidraw-sidecar-mcp

使用说明

排除侧车MCP

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

部署

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

CLI标志

标志 描述
--static <dir> 从以下位置提供前端静态文件 <dir> 用于单端口部署
--base-url <url> 观众链接的面向公众的基本URL。当服务器位于反向代理之后并且无法检测到其自己的公共域时使用。优先于 BASE_URL 环境变量。
--stdio 在stdio模式下运行（供后端子进程嵌入式使用）

基本工作流程

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

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://<host>: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 <command>

# 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 <command>

命令：

# 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 <session_key> 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 <session_key> -

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

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

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

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

# Check session status
node mcp-client.mjs session-info <session_key>

浏览器查看器

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

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

克劳德代码技能

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

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

然后使用：

/draw http://localhost:3001

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

MCP工具

工具 参数 说明
create_session none 创建24小时会话。返回会话密钥+查看器URL
read_me none 包含颜色、坐标和示例的元素格式备忘单
create_view session_key, elements （JSON字符串） 渲染图。返回SVG图像+检查点ID
get_current_view session_key 获取最新的SVG，包括浏览器编辑

REST API

端点 方法 描述
/api/sessions/:key GET 会话元数据
/api/sessions/:key/elements GET 当前元素数组
/api/sessions/:key/elements PUT 更换元件
/api/sessions/:key/svg GET 渲染的SVG图像

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

积分

建于 白板绘图 和那个 模型上下文协议.

许可证

麻省理工学院

相关 MCP