Excalidraw

The Excalidraw MCP Server streams hand-drawn style diagrams directly into MCP-compatible clients like Claude, ChatGPT, and VS Code.

It renders interactive Excalidraw whiteboards that support smooth viewport camera control and fullscreen editing.

You can prompt an AI to generate a diagram, then tweak it interactively without leaving your chat environment.

Features

• 🎨 Interactive Fullscreen Editing: The server renders a complete Excalidraw canvas inside the chat window. Users can manually adjust the AI-generated diagrams.
• 🎥 Smooth Viewport Camera Control: The integration manages the canvas view automatically. You can see the exact section of the diagram the AI is modifying.
• 🌐 Universal Client Compatibility: The tool works with any client that supports the MCP Apps extension. Supported clients include Claude, ChatGPT, VS Code, and Goose.
• ☁️ One-Click Vercel Deployment: You can host your own instance on Vercel. The deployment process requires zero environment variables.

Use Cases

Development teams use this server to generate architecture diagrams during planning sessions. You can describe a system design verbally, and the AI produces a visual representation you can immediately refine.

Technical writers create explanatory diagrams for documentation. The hand-drawn style reduces visual formality while maintaining clarity, which works well for conceptual explanations.

Remote brainstorming sessions benefit from shared whiteboarding. Participants can view and edit the same diagram through their chat interface without switching applications.

Educational content creators generate quick visual aids. The interactive nature lets students explore diagrams by zooming and panning while the explanation happens in chat.

How To Use It

Remote Installation (Recommended)

You can add a custom MCP connector in your AI client and point it to https://mcp.excalidraw.com. This method works well for apps that lack official support.

Local Installation via Extension

Download the excalidraw-mcp-app.mcpb file from the GitHub Releases page and double-click it. This action installs the extension directly into Claude Desktop.

Local Installation from Source

Clone the repository to your local machine and navigate into the directory. Run the package manager commands to build the project.

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

Open your Claude Desktop configuration file located at ~/Library/Application Support/Claude/claude_desktop_config.json and add the following JSON structure.

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args":["/path/to/excalidraw-mcp-app/dist/index.js", "--stdio"]
    }
  }
}

Replace /path/to/excalidraw-mcp-app with the actual path on your system. Restart Claude Desktop to apply the changes.

Usage Examples

You can trigger the server via natural language prompts. Type “Draw a cute cat using excalidraw” into your AI client. Type “Draw an architecture diagram showing a user connecting to an API server which talks to a database” to generate a technical schematic.

FAQs

Q: Which MCP clients support this server?
A: Any client implementing the MCP Apps extension works with this server. Confirmed clients include Claude Desktop, VS Code with appropriate extensions, Goose, and ChatGPT. Check your client’s documentation for MCP App support.

Q: Can I edit diagrams after the AI generates them?
A: Yes. Each diagram renders as a fully interactive Excalidraw instance. Click the fullscreen button to access the complete editing toolset, or edit directly in the embedded view. Changes remain local to your session.

Q: Does the server store any diagrams I create?
A: No. The server generates diagrams on demand and streams them to your client. Diagrams exist only in your current session unless you explicitly save them through your client.