Security-hardened MCP server for Excalidraw with real-time canvas sync
excalidraw-mcp-server
The only Excalidraw MCP server with security hardening, inline diagram rendering, and real-time canvas sync.
What it does
Ask your AI to draw a diagram, and it appears right inside the chat. The MCP server gives Claude Desktop, ChatGPT, VS Code, and Cursor a full set of drawing tools backed by the Excalidraw format -- with API authentication, rate limiting, and input validation on every operation.
v2.0 adds MCP Apps support: diagrams stream inline as interactive SVG widgets with draw-on animations, and you can export any diagram to excalidraw.com with one click.
Two modes, zero config
Standalone mode (default) -- just install and go. The server runs with an in-process element store. No canvas server, no API keys, no setup. Your MCP client calls the tools, and diagrams render inline.
Connected mode -- start the optional canvas server for real-time browser sync. Multiple clients can collaborate on the same canvas through authenticated WebSocket connections. File persistence keeps state across restarts.
The server auto-detects which mode to use: if a canvas server is reachable, it connects to it. Otherwise it falls back to standalone.
Architecture
Diagram created with excalidraw-mcp-server -- edit in Excalidraw
Features
MCP Apps (v2.0)
- Inline diagram rendering in Claude Desktop, ChatGPT, and VS Code
- Streaming SVG with draw-on animations as elements arrive
- Export to excalidraw.com with one click
- Element reference cheatsheet via
read_metool
16 MCP tools
- Create, update, delete, and query elements (rectangle, ellipse, diamond, arrow, text, line, freedraw)
- Batch create up to 100 elements at once
- Group, ungroup, align, distribute, lock, unlock
- Mermaid diagram conversion
- SVG and PNG export
Security
- API key authentication with constant-time comparison
- Origin-restricted CORS (no wildcards)
- WebSocket auth with token and origin validation
- Standard and strict rate limiting tiers
- Bounded Zod schemas with
.strict()on every endpoint - Helmet.js security headers with CSP
Infrastructure
- Real-time WebSocket sync across browser clients
- Optional atomic-write file persistence
- Structured pino audit logging
Install
npm install -g excalidraw-mcp-server
Or run directly:
npx excalidraw-mcp-server
Quick start
Standalone (recommended for most users)
Just point your MCP client at the server. No canvas server needed.
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["excalidraw-mcp-server"]
}
}
}
Then ask your AI: "Draw an architecture diagram showing a load balancer, three app servers, and a database"
Connected mode (real-time browser sync)
# 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
Point your MCP client at the server with the same API key:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["excalidraw-mcp-server"],
"env": {
"EXCALIDRAW_API_KEY": "<your-key>",
"CANVAS_SERVER_URL": "http://127.0.0.1:3000"
}
}
}
}
MCP tools
| Tool | Description |
|---|---|
create_view |
Render elements as an inline SVG widget with streaming animations (MCP Apps) |
read_me |
Get the element reference cheatsheet (types, colors, sizing tips) |
create_element |
Create a single element (rectangle, ellipse, diamond, arrow, text, line, freedraw) |
update_element |
Update an existing element by ID |
delete_element |
Delete an element by ID |
query_elements |
Search elements by type, locked status, or group ID |
get_resource |
Get scene state, all elements, theme, or library |
batch_create_elements |
Tools (8)
create_viewRender elements as an inline SVG widget with streaming animationsread_meGet the element reference cheatsheet including types, colors, and sizing tipscreate_elementCreate a single element such as a rectangle, ellipse, diamond, arrow, text, line, or freedrawupdate_elementUpdate an existing element by IDdelete_elementDelete an element by IDquery_elementsSearch elements by type, locked status, or group IDget_resourceGet scene state, all elements, theme, or librarybatch_create_elementsCreate up to 100 elements at onceEnvironment Variables
EXCALIDRAW_API_KEYAPI key for authenticated WebSocket connectionsCANVAS_SERVER_URLURL of the canvas server for real-time browser syncConfiguration
{"mcpServers": {"excalidraw": {"command": "npx", "args": ["excalidraw-mcp-server"]}}}