Excalidraw MCP App Server
Allows creation and streaming of hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.
Click on "Deploy 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 App ServerCreate a network diagram showing a firewall and two servers"
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 App Server
MCP server that streams hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.

Install
Works with any client that supports MCP Apps — Claude, ChatGPT, VS Code, Goose, and others. If something doesn't work, please open an issue.
Remote (recommended)
https://mcp.excalidraw.com
For apps that don't yet have an official integration, you can add a custom MCP / connector (naming can vary between apps).
Local
Option A: Download Extension
Download
excalidraw-mcp-app.mcpbfrom ReleasesDouble-click to install in Claude Desktop
Option B: Build from Source
git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp-app
pnpm install && pnpm run buildAdd to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"excalidraw": {
"command": "node",
"args": ["/path/to/excalidraw-mcp-app/dist/index.js", "--stdio"]
}
}
}Restart Claude Desktop.
Related MCP server: Excalidraw MCP App Server
Usage
Example prompts:
Draw a cute cat using excalidrawDraw an architecture diagram showing a user connecting to an API server which talks to a databaseWhat are MCP Apps and how can I build one?
Text responses can only go so far. Sometimes users need to interact with data, not just read about it. MCP Apps is an official Model Context Protocol extension that lets servers return interactive HTML interfaces (data visualizations, forms, dashboards) that render directly in the chat.
Getting started for humans: documentation
Getting started for AIs: skill
See CONTRIBUTING.md for contribution, deployment, and release instructions.
Credits
Built with Excalidraw — a virtual whiteboard for sketching hand-drawn like diagrams.
License
This server cannot be deployed
Maintenance
Related MCP Connectors
Let Claude, Cursor, or ChatGPT author Mermaid diagrams your team can read and share.
- UnpagedOAuthio.unpaged
Whiteboard where any shape opens into another canvas. Claude Code plugin renders plans on it.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Create diagrams in chat, rendered as live interactive draw.io diagrams. 10,000+ searchable shapes.
Related MCP Servers
- AlicenseAqualityCmaintenanceEnables AI agents to programmatically generate, edit, and view Excalidraw diagrams with real-time browser synchronization. It provides a suite of tools for adding shapes, text, and arrows to diagrams through natural language interactions.113,095 npm100MIT
- FlicenseNot gradedqualityDmaintenanceEnables users to create and interact with hand-drawn sketches and architecture diagrams directly within chat interfaces using Excalidraw. It leverages the Model Context Protocol to provide interactive HTML visualizations with smooth viewport control and fullscreen editing capabilities.-
- FlicenseNot gradedqualityDmaintenanceEnables users to create and interact with hand-drawn Excalidraw diagrams featuring smooth viewport camera control and interactive fullscreen editing. It uses the MCP Apps extension to render collaborative virtual whiteboards directly within supported AI chat interfaces.-
- FlicenseNot gradedqualityDmaintenanceEnables AI assistants to generate interactive Excalidraw diagrams with viewport camera control and fullscreen editing directly in the chat.5,309-