Excalidraw MCP App

What it does

Excalidraw MCP App turns Claude into a live diagramming partner. Describe an architecture, flow, or concept and Claude renders an animated hand-drawn Excalidraw diagram directly in the chat, with smooth pan/zoom camera control and the ability to open a fullscreen editor for manual tweaks.

Key features

• Streaming SVG rendering with draw-on animations so diagrams appear progressively
• Viewport camera control — smooth pan and zoom to navigate complex diagrams
• Label binding — text auto-centers inside shapes for clean, readable output
• Interactive fullscreen editor — click to open the full Excalidraw UI and edit elements manually
• Screenshot feedback loop — screenshot context is sent back to Claude for iterative refinement

Installation

Claude Desktop (Recommended — .mcpb extension)

1. Download the latest excalidraw-mcp-app.mcpb from Releases
2. Double-click the .mcpb file to install in Claude Desktop
3. Restart Claude Desktop — done

Claude Desktop (Build from Source)

git clone https://github.com/vtmade/excalidraw-mcp-app.git
cd excalidraw-mcp-app
npm install
npm run build

Add 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.

Supported hosts

Claude Desktop (native .mcpb installer or manual stdio config).