Excalimate MCP Server

Turn hand-drawn Excalidraw diagrams into keyframe animations

Website · MCP Server Docs · Report Bug

Draw diagrams with the full Excalidraw editor, then animate elements with opacity fades, position slides, scale effects, rotation, and arrow draw-on animations. Export as MP4, WebM, GIF, or animated SVG. Includes an MCP server so AI agents can create and animate diagrams in real-time.

Demo

https://github.com/user-attachments/assets/77e87c62-0ff4-4a56-aee6-50553b94798c

[!CAUTION] A considerable part of this codebase was built with AI. The process of cleaning up the code and fixing bugs is still ongoing — use it cautiously. If you encounter any issues, please report them.

Features

• Full Excalidraw editor — draw, edit, resize, connect arrows, add text
• Keyframe animation — opacity, position, scale, rotation, draw progress
• Timeline — collapsible per-element tracks with interpolation lines, clip markers, scrubbing
• Sequence reveal — stagger-reveal multiple elements with one click
• Camera animation — pan/zoom keyframes with aspect ratio control
• Export — MP4 (H.264), WebM (VP9), GIF, animated SVG
• E2E encrypted sharing — AES-256-GCM, key stays in the URL hash fragment
• MCP server — 23 tools for AI-driven scene creation, animation, and sharing
• Live mode — watch AI changes appear in the editor in real-time via SSE

Quick Start

Try it now — no cloning required:

npx @excalimate/mcp-server

Open excalimate.com, click the Live button, and point your AI tool to http://localhost:3001/mcp.

Local development

npm install
npm run dev
# → http://localhost:5173

AI Integration (MCP Server)

The MCP server lets AI agents (Copilot, Claude, Cursor, Windsurf) create and animate diagrams for you. Start the server, connect your AI tool, and watch diagrams appear live in excalimate.com.

npx @excalimate/mcp-server              # default port 3001
npx @excalimate/mcp-server --port 4000  # custom port

{
  "servers": {
    "excalimate": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

{
  "mcpServers": {
    "excalimate": {
      "command": "npx",
      "args": ["@excalimate/mcp-server", "--stdio"]
    }
  }
}

npx @excalimate/mcp-server &
claude mcp add excalimate http://localhost:3001/mcp

[!TIP] HTTP mode (default) enables live preview — you see the AI's changes in real-time. stdio mode is only needed for tools that don't support HTTP transport.

See mcp-server/README.md for the full tool reference and configuration guide.

AI Skills (Optional)

Excalimate ships with 16 specialized skills that teach AI agents how to create specific diagram types (architecture diagrams, flowcharts, sequence diagrams, etc.) with proper animation patterns. Skills dramatically improve output quality.

GitHub Copilot (recommended):

npx skills add https://github.com/excalimate/excalimate

Manual installation (any agent):

Copy the skills/ directory into