Excalidraw Render MCP

excalidraw渲染

无头Excalidraw图表渲染器 克劳德代码CLI 以及其他MCP客户端。将手绘图渲染为PNG或SVG——图在本地渲染，而不是在Excalidraw的服务器上。

使用无头铬（via 代理浏览器)在服务器端渲染图表。第一次渲染需要大约3秒（浏览器启动+CDN导入），后续渲染需要大约60毫秒。

运作原理

Architecture

1. 无头Chromium浏览器作为单例启动
2. 浏览器导航到 esm.sh 并动态导入 @excalidraw/excalidraw
3. 元素通过以下方式转换 convertToExcalidrawElements() 并通过以下方式渲染为SVG exportToSvg()
4. 对于PNG：Playwright会截取SVG的元素级屏幕截图。对于SVG：标记直接序列化到文件。
5. 浏览器在后续渲染中保持活动状态（每次渲染约60ms）

安装

一个命令（npm）

# Claude Code
claude mcp add --scope user --transport stdio excalidraw -- npx -y excalidraw-render

# Or with any MCP client
npx -y excalidraw-render

来源

git clone https://github.com/bassimeledath/excalidraw-render.git
cd excalidraw-render
npm install
npm run build

# Add to Claude Code
claude mcp add --scope user --transport stdio excalidraw -- node /absolute/path/to/excalidraw-render/dist/index.js

Claude Desktop/其他客户

添加到MCP配置中：

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-render"]
    }
  }
}

工具

用法

安装后，让Claude绘制：

• “绘制一个架构图，显示连接到Redis和Gemini的FastAPI服务器”
• “创建git分支模型的Excalidraw图”
• “绘制用户身份验证的流程图”

克劳德会打电话的 excalidraw_read_me 要学习元素格式，则 create_excalidraw_diagram 使用JSON元素。文件保存到磁盘并返回路径。

create_excalidraw_diagram 参数

隐私

图表在您计算机上的无头Chromium实例中本地呈现，而不是在Excalidraw的服务器上。唯一的网络请求是在启动时从esm.sh获取Excalidraw JavaScript库——没有图表内容发送到第三方服务器。

需求

• Node.js 18+
• Chromium是通过以下方式自动安装的 agent-browser install （作为安装后挂钩运行）

学分与灵感

这个项目的灵感来自 excalidraw mcp应用程序 Anton Pk，该公司使用MCP应用程序在Claude Desktop内渲染交互式Excalidraw图(ui:// 资源）。如果你使用带有浏览器界面的Claude Desktop，这是一个很好的工具。

excalidraw渲染 针对不同的用例采取不同的方法：

许可证

麻省理工学院