Excaliframe

Excaliframe brings animated diagrams and auto-export to Excalidraw in VS Code. Create stunning animated visualizations that export automatically to SVG—perfect for documentation, blog posts, and presentations.

Built as a fork of excalidraw-vscode by pomdtr, powered by Excalidraw.

✨ Features

🎬 Animate Your Drawings

• Add smooth draw and fade animations to your diagrams
• Intuitive timeline control for managing animation sequences
• Real-time preview of animated exports

📦 Auto-Export Frames

• Static exports: .stil.light.exp.svg and .stil.dark.exp.svg
• Animated exports: .ani.light.exp.svg and .ani.dark.exp.svg (with SMIL animations)
• Exports update automatically as you edit—no manual export step needed!

🎨 Perfect For

• Documentation: Animated diagrams that work in GitHub, GitLab, and more
• Blog posts: Auto-updating SVGs that stay in sync with your diagrams
• Presentations: Export to both light and dark themes automatically

🚀 Quick Start

Creating Animated Frames

1. Draw your diagram in Excalidraw
2. Wrap elements in a frame (select elements → use the Animate panel)
3. Toggle "Animate" on the frame
4. The frame automatically gets a random name (e.g., jumping__horse)
5. Adjust timing and animation type in the timeline

Exporting Frames

1. Toggle "Export" on any frame
2. Files are automatically created:
   • {framename}.stil.light.exp.svg - static light version
   • {framename}.stil.dark.exp.svg - static dark version
   • {framename}.ani.light.exp.svg - animated light version (if animate enabled)
   • {framename}.ani.dark.exp.svg - animated dark version (if animate enabled)

Using in Markdown

![My diagram](https://github.com/martin-lysk/excalidraw-vscode/raw/HEAD/jumping__horse.ani.dark.exp.svg#gh-dark-mode-only)
![My diagram](https://github.com/martin-lysk/excalidraw-vscode/raw/HEAD/jumping__horse.ani.light.exp.svg#gh-light-mode-only)

The images update instantly when you modify the frame!

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "Excaliframe"
4. Click Install

From VSIX

1. Download the latest .vsix from Releases
2. In VS Code, open Extensions panel
3. Click "..." → "Install from VSIX..."
4. Select the downloaded file

⚙️ Configuration

{
  // Auto-export frames (default: true)
  "excalidraw.autoExportFrames": true,

  // Which themes to export (default: both)
  "excalidraw.frameExportThemes": ["light", "dark"],

  // Export location (default: same folder)
  "excalidraw.frameExportLocation": "same",  // or "subfolder"

  // Subfolder name when using subfolder (default: .exports)
  "excalidraw.frameExportSubfolder": ".exports",

  // Debounce delay before re-exporting (ms, default: 500)
  "excalidraw.frameExportDebounce": 500
}

🎯 Usage Tips

Frame Naming

• Frames get auto-generated names (e.g., jumping__horse, running__dog)
• Edit the export name field and press Enter to commit
• Press Escape to cancel changes

Timeline Controls

• Drag elements to reposition in time
• Drag edges to adjust duration
• Click to select elements
• Zoom in/out buttons for precise control

Animation Types

• Draw: Elements draw themselves stroke by stroke
• Fade: Elements fade in smoothly

🙏 Credits

This extension is a fork of the excellent excalidraw-vscode by pomdtr, which integrates Excalidraw into VS Code.

📝 License

Same as the original excalidraw-vscode project.