Enables AI agents to programmatically generate, edit, and view Excalidraw diagrams, featuring tools for adding shapes, text, and arrows with real-time preview and bi-directional synchronization.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Excalidraw MCP ServerCreate a flowchart showing how a user logs into our app"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Excalidraw MCP Component
An MCP (Model Context Protocol) server that enables AI agents to programmatically generate, edit, and view Excalidraw diagrams.
✨ Features
Diagram Generation: Create new diagrams from text descriptions
Real-time Preview: View changes instantly in the browser
Tool Integration: Explicit tools for adding shapes, text, arrows, and more
Bi-directional: Changes in the browser sync back to the agent context
📦 Components
@excalidraw-mcp/server: The core MCP server implementation with embedded HTTP/WebSocket server.
🚀 Quick Start
Prerequisites
Node.js >= 18
pnpm >= 9
Installation
Running Locally
Visit http://localhost:3100 to see the Excalidraw interface.
🤖 Using with Claude Desktop
Add the following to your claude_desktop_config.json:
🛠️ Development
This project involves a monorepo structure using pnpm workspace.
packages/mcp-server: The MCP server and web interface
📄 License
MIT