excalidraw

excalidraw-mcp-server provides an MCP interface to render diagrams inline within supported clients (Claude Desktop, ChatGPT, VS Code, Cursor) using the Excalidraw format. It includes API authentication, rate limiting, input validation, and security headers, with optional real-time canvas synchronization via a canvas server. In standalone mode it runs an in-process element store and renders diagrams directly in responses. In connected mode it can connect to a canvas server to enable multi-user, real-time collaboration with WebSocket-based syncing. The server exposes a suite of 16 MCP tools (create, update, delete, query, batch create, grouping, alignment, etc.) and supports exporting diagrams to Excalidraw or to external services. To use it, configure your MCP client to point at the Excalidraw MCP server (for example via the npx command shown in the config) and ensure the appropriate API key and canvas URL are provided if you enable connected mode. The included tools such as create_element, update_element, delete_element, batch_create_elements, and read_me enable rich diagram workflows, while read_me provides a cheatsheet for element references and sizing tips.

Prerequisites:

• Node.js 18+ installed on the host
• npm (comes with Node.js) or pnpm/yarn if you prefer

Install steps:

1. Install the MCP server globally (preferred for quick start):

npm install -g excalidraw-mcp-server

2. Run the server directly (standalone mode):

npx excalidraw-mcp-server

3. If you want to enable connected mode, install and run the optional canvas server if needed, then configure environment variables as shown in the README (EXCALIDRAW_API_KEY and CANVAS_SERVER_URL) and start the canvas component:

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

# Start the canvas (example)
EXCALIDRAW_API_KEY=<your-key> npm run canvas

4. If you prefer embedding in a project, you can reference the server in your MCP client configuration (as shown in the examples).

Tips and common considerations:

• Use EXCALIDRAW_API_KEY with a minimum length of 32 characters for authentication in connected mode.
• Restrict CORS origins to trusted clients via CORS configuration (no wildcards).
• In connected mode, ensure the CANVAS_SERVER_URL points to a reachable canvas server and that the API key is provided to clients.
• The server enforces rate limiting, strict input validation using Zod, and security headers (Helmet.js) including CSP.
• For persistence, you can enable optional atomic-write file persistence via the provided environment toggles; configure PERSISTENCE_ENABLED and PERSISTENCE_DIR accordingly.
• When using multiple clients, you can rely on real-time WebSocket synchronization to keep diagrams in sync across devices.
• If you see issues in connected mode, check CANVAS_PORT, CANVAS_HOST, and network accessibility between the MCP server and the canvas server.