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.
[!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
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
[!NOTE]
Claude Desktop uses stdio transport — no live preview. Use save_checkpoint or share_project to view results in app.excalimate.com.
Claude Code (CLI)
npx @excalimate/mcp-server &
claude mcp add excalimate http://localhost:3001/mcp
Cursor / Windsurf / Other HTTP clients
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.
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.
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.
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:
Select elements and modify properties — keyframes are created automatically
Scrub the timeline, move keyframes, and set the clip range
Use Sequence Reveal for staggered element animations
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.
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
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.
