Excalimate

What is Excalimate about?

Excalimate turns static Excalidraw whiteboard sketches into fully animated presentations. Users draw with the native Excalidraw editor, then apply opacity fades, position slides, scaling, rotation, and arrow draw‑on effects through a per‑element timeline. The project also provides an optional MCP server so AI agents can programmatically build and animate diagrams, with changes reflected instantly in the web app.

How to use Excalimate?

1. Start the MCP server (optional) – npx @excalimate/mcp-server launches the server on port 3001 by default.
2. Open the web app at https://app.excalimate.com (or run the source locally with npm run dev).
3. Draw your diagram using the full Excalidraw toolbar.
4. Switch to Animate mode (Ctrl+E) to add keyframes, scrub the timeline, and fine‑tune easing.
5. Use Sequence Reveal for staggered entry or Camera Animation for pan/zoom.
6. Export the result as MP4, WebM, GIF, or animated SVG via the Export dialog.
7. Share encrypted projects through the built‑in Share feature or via the MCP server for AI‑generated content.

Key features of Excalimate

• Full‑featured Excalidraw editor embedded in a React SPA.
• Custom keyframe engine supporting opacity, position, scale, rotation, and draw‑progress.
• Collapsible per‑element tracks with interpolation curves and clip markers.
• Sequence reveal and camera pan/zoom with aspect‑ratio control.
• Multi‑format export: MP4 (H.264), WebM (VP9), GIF, animated SVG.
• End‑to‑end AES‑256‑GCM encryption for shared projects.
• MCP server exposing 23 tools for AI‑driven diagram creation, animation, and sharing.
• Live mode using Server‑Sent Events so AI changes appear instantly.
• Ready‑made AI skills (16) for architecture diagrams, flowcharts, mind‑maps, etc.

Use cases of Excalimate

• Product demos – Quickly turn sketchy UI mockups into animated walkthroughs.
• Technical documentation – Generate animated architecture or data‑pipeline diagrams.
• Educational videos – Create step‑by‑step explainer animations without video editing software.
• AI‑assisted design – Let Copilot, Claude, or other agents script diagram creation via the MCP server.
• Rapid prototyping – Iterate on motion‑design concepts directly in the browser.

FAQ

Q: Do I need to run the MCP server to use the web app?
A: No. The core editor works standalone. The server is only required for AI‑driven creation and live preview.

Q: How do I start the MCP server?
A: Run npx @excalimate/mcp-server. Use --port <number> to change the default port.

Q: Which export formats are supported?
A: MP4 (H.264), WebM (VP9), GIF, and animated SVG.

Q: Is my shared diagram private?
A: Yes. Projects are encrypted client‑side with AES‑256‑GCM; the encryption key stays in the URL fragment.

Q: Can I add my own AI skills?
A: Absolutely. Place additional SKILL.md files in the skills/ directory or point your AI tool’s context configuration to them.

Q: What browsers are supported?
A: Modern browsers with Web Crypto API and WebCodecs support (Chrome, Edge, Firefox, Safari recent versions).

Turn hand-drawn Excalidraw diagrams into keyframe animations

App · Landing Page · Feedback · 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 app.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 app.excalimate.com.

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

Add to .vscode/mcp.json:

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

Add to claude_desktop_config.json:

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

[!NOTE] Claude Desktop uses stdio transport — no live preview. Use save_checkpoint or share_project to view results in app.excalimate.com.

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

Point your MCP client to http://localhost:3001/mcp and start the server with npx @excalimate/mcp-server.

[!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 your project, or point your agent's skill/context configuration to the skill files. Each skill is a standalone SKILL.md file that can be loaded as context.

Available skills: excalimate-core · animated-presentations · animation-patterns · architecture-diagrams · comparison-diagrams · data-pipelines · diagram-theming · er-diagrams · explainer-animations · export-optimization · flowcharts · mind-maps · network-topologies · org-charts · sequence-diagrams · timeline-roadmaps

Usage

Edit Mode

Draw your diagram using the Excalidraw editor. All standard tools work — rectangles, ellipses, arrows, text, groups, etc.

Animate Mode

Switch to Animate mode (Ctrl+E) to:

1. Select elements and modify properties — keyframes are created automatically
2. Scrub the timeline, move keyframes, and set the clip range
3. Use Sequence Reveal for staggered element animations
4. Export to MP4, WebM, GIF, or animated SVG

Sharing

Share your animation via File → Share. The project is encrypted client-side with AES-256-GCM and uploaded as an opaque blob — the server never sees the encryption key.

Architecture

excalimate/
├── src/                        # React web app (Vite + TypeScript)
│   ├── components/             # UI (Mantine + Tailwind CSS)
│   ├── core/                   # Animation engine, interpolation, playback
│   ├── stores/                 # Zustand state management
│   ├── services/               # Export pipeline, encryption, file I/O
│   └── hooks/                  # MCP live, hotkeys, auto-save
├── mcp-server/                 # MCP server (Node.js + Express)
│   └── src/server/             # Modular tool registrations
├── skills/                     # AI skill definitions (16 skills)
└── docs/                       # Design guidelines, plans

The web app is a static SPA — all rendering, animation, and editing happens in the browser. The MCP server is optional, used only for AI integration and live preview.

Tech Stack

Layer	Technology
UI	React 19, Mantine 8, Tailwind CSS 4, Tabler Icons
Canvas	Excalidraw 0.18
State	Zustand
Animation	Custom keyframe engine with interpolation + easing
Export	WebCodecs (MP4/WebM), gif.js, SVG
Encryption	Web Crypto API (AES-256-GCM)
MCP Server	Node.js, Express, MCP SDK
Build	Vite 7, TypeScript 5.9
Deployment	Cloudflare Pages, Cloudflare Workers, Cloudflare R2

Development

npm run dev          # Start dev server
npm run build        # Production build
npm run test         # Run tests
npm run lint         # ESLint

MCP server:

cd mcp-server
npm install && npm run build
node dist/index.js              # HTTP mode
node dist/index.js --stdio      # stdio mode
node dist/index.js --port 4000  # custom port

Acknowledgements

This project was inspired by excalidraw-animate by Daishi Kato, which demonstrated that Excalidraw drawings could be brought to life with animations. Thank you for the inspiration!

Built with Excalidraw — the amazing open-source virtual whiteboard.

License

MIT — see LICENSE