How to Export Animations

Excalimate supports 8 export formats for your animated diagrams. Each format serves different use cases — from sharing on social media to embedding in web applications. This guide covers when and how to export animation as MP4, WebM, GIF, animated SVG, dotLottie, Lottie JSON, PNG, and WebP.

To export, open the export panel in Excalimate, choose your format, configure quality settings, and click export. The animation renderer processes your keyframes and produces the final file.

If you want an end-to-end process from diagram prep through embed-ready assets, follow the Excalidraw to Lottie workflow.

MP4 (H.264) is the most universally supported video format. When you export animation as MP4 from Excalimate, you get a video file that plays on virtually every device, platform, and social media site.

• Best for — sharing on social media, embedding in PowerPoint/Keynote, uploading to YouTube or Vimeo
• Pros — universal playback support, good compression, hardware-accelerated decoding
• Cons — no transparency support, lossy compression, larger than vector formats
• Typical size — 200KB–2MB for a 10-second diagram animation

MP4 is the safest choice when you don't know where the animation will be viewed. If your audience uses PowerPoint, Keynote, or any native video player, export animation as MP4.

WebM (VP9) is a web-first video format that delivers smaller file sizes than MP4 with comparable quality. It's the ideal format for embedding animated diagrams directly on websites.

• Best for — web pages, documentation sites, blog posts
• Pros — transparency support, better compression than H.264, royalty-free
• Cons — not supported in Safari on older macOS versions, less universal than MP4
• Typical size — 100KB–1.5MB for a 10-second diagram animation (20–40% smaller than MP4)

GIF is the classic animated image format. When you convert a diagram to GIF, you get a file that works everywhere — email clients, chat apps, forums, and even places that don't support video.

• Best for — email newsletters, GitHub READMEs, Slack/Teams messages, legacy platforms
• Pros — universal support (even in email), auto-plays everywhere, no player needed
• Cons — very large file sizes, limited to 256 colors, no audio, binary transparency only
• Typical size — 1MB–10MB+ for a 10-second diagram animation

Animated SVG export produces a self-contained SVG file with embedded CSS animations. The result is a web-native vector animation that scales to any size without losing quality.

• Best for — documentation, technical blogs, responsive web design, print-quality visuals
• Pros — infinite scalability, tiny file size, native web format, accessible, indexable by search engines
• Cons — complex animations may not render identically across all browsers, no audio
• Typical size — 20KB–200KB for most diagram animations

<!-- Animated SVG embeds directly in HTML -->
<img src="diagram.svg" alt="Architecture diagram" />

<!-- Or inline for full CSS/JS control -->
<object type="image/svg+xml" data="diagram.svg">
  Architecture diagram
</object>

Animated SVG export is perfect for technical documentation where you need crisp vectors at any zoom level. The animated SVG export preserves the hand-drawn Excalidraw aesthetic at every resolution.

dotLottie (.lottie) is a compressed binary format for Lottie animations. When you export a Lottie animation from Excalimate in dotLottie format, you get an incredibly small file that's perfect for web embedding.

• Best for — web applications, mobile apps, interactive documentation, product UI
• Pros — smallest file size, scriptable playback, transparency, resolution-independent, interactive
• Cons — requires a Lottie player library, not a standalone video/image format
• Typical size — 5KB–50KB for most diagram animations

<script src="https://unpkg.com/@dotlottie/player-component"></script>

<dotlottie-wc
  src="diagram.lottie"
  autoplay
  loop
  style="width: 100%; max-width: 800px"
></dotlottie-wc>

Lottie JSON (.json) is the original Lottie animation format. Exporting Lottie animation as JSON gives you maximum compatibility with the broadest range of Lottie tools and players.

• Best for — integration with other animation tools, After Effects workflows, cross-platform libraries
• Pros — widest tool support, human-readable format, easy to inspect and debug
• Cons — larger than dotLottie (uncompressed JSON), verbose for complex animations
• Typical size — 50KB–500KB for most diagram animations

Use Lottie JSON when you need to import the animation into another tool or when your target platform's Lottie player doesn't support the dotLottie format yet.

PNG export captures a single frame of your animation as a static image. This is useful for creating thumbnail previews, cover images, or static fallbacks for your animated diagrams.

• Best for — thumbnails, social media preview images, print, static documentation
• Pros — universal image format, lossless quality, transparency support
• Cons — static only (no animation), larger than WebP
• Typical size — 50KB–500KB depending on resolution and complexity

WebP is Google's modern image format that offers superior compression compared to PNG. Export as WebP when you need a static frame capture with the smallest possible file size.

• Best for — web thumbnails, optimized preview images, performance-critical pages
• Pros — 25–35% smaller than PNG, transparency support, widely supported in modern browsers
• Cons — static only, not supported in very old browsers
• Typical size — 30KB–350KB (significantly smaller than equivalent PNG)

• Embedding on a website? → Use dotLottie for the smallest, most interactive result
• Sharing in a presentation? → Export animation as MP4 for PowerPoint/Keynote compatibility
• Posting to social media? → MP4 works on every platform
• Adding to documentation? → Animated SVG for crisp vectors, or dotLottie for interactivity
• Sending in email or Slack? → Convert diagram to GIF (only when no alternative works)
• Need a cover image? → WebP for web, PNG for print

# Convert WebM to MP4 (if you need both)
ffmpeg -i animation.webm -c:v libx264 -crf 20 animation.mp4

# Extract a single frame as PNG
ffmpeg -i animation.mp4 -ss 00:00:02 -frames:v 1 frame.png