Creating Animated Designs in One Shot

The most powerful way to use Excalimate with AI is the create_animated_scene tool — it creates your entire diagram AND its animations in a single call. No back-and-forth, no multiple steps.

This composite tool accepts everything needed to produce a finished animation:

• elements — the Excalidraw elements (shapes, text, arrows)
• keyframes — animation keyframes for each element
• sequences — reveal sequences for staggered appearances
• cameraFrame — camera position and aspect ratio
• clipStart / clipEnd — export time range

Only elements is required — everything else is optional. The AI decides which options to include based on your prompt.

Here's a complete example showing how a single prompt turns into an animated diagram.

Create an animated architecture diagram showing a Client, API Gateway, and Database. The Client should fade in first, then an arrow draws to the API Gateway which pops in, then another arrow draws to the Database which pops in. Use a 16:9 camera.

The AI processes this prompt and calls create_animated_scene with all elements, keyframes, camera settings, and clip range in one shot:

create_animated_scene({
  elements: [
    rectangle("Client",      x: 100, y: 200),
    rectangle("API Gateway", x: 450, y: 200),
    rectangle("Database",    x: 800, y: 200),
    arrow(from: "Client", to: "API Gateway"),
    arrow(from: "API Gateway", to: "Database"),
  ],
  keyframes: [
    // Client fades in
    { target: "client", opacity: 0, time: 0 },
    { target: "client", opacity: 1, time: 500 },
    // Arrow 1 draws
    { target: "arrow-1", drawProgress: 0, time: 500 },
    { target: "arrow-1", drawProgress: 1, time: 1200 },
    // API Gateway pops in
    { target: "gateway", scale: 0, time: 1200 },
    { target: "gateway", scale: 1, time: 1600,
      easing: "easeOutBack" },
    // Arrow 2 draws
    { target: "arrow-2", drawProgress: 0, time: 1600 },
    { target: "arrow-2", drawProgress: 1, time: 2300 },
    // Database pops in
    { target: "database", scale: 0, time: 2300 },
    { target: "database", scale: 1, time: 2700,
      easing: "easeOutBack" },
  ],
  cameraFrame: {
    aspectRatio: "16:9",
    width: 1000
  },
  clipEnd: 3200
})

The result is a fully animated diagram — the Client fades in, an arrow draws to the API Gateway which pops in with a bounce, then another arrow draws to the Database which pops in the same way. All in about 3 seconds.

Excalimate includes 16 specialized AI skills for common diagram types. When your AI assistant loads these skills, it gains domain-specific knowledge for creating better diagrams of each type.

• architecture-diagrams — cloud/system architecture
• flowcharts — process flows and decision trees
• sequence-diagrams — API call sequences
• er-diagrams — database schemas
• mind-maps — concept brainstorming
• timeline-roadmaps — project timelines
• org-charts — team hierarchies

After creating your animated design, you can export it in several ways:

• From the Excalimate UI — use the export panel to choose format and quality
• Via MCP — the AI can set the clip range with set_clip_range

Supported export formats: MP4, WebM, GIF, SVG, dotLottie, Lottie JSON, PNG, and WebP.

The share_project tool creates end-to-end encrypted share URLs for your animated designs. The encryption key lives in the URL hash fragment, so it is never sent to any server — only people with the link can view your work.

• Describe the diagram and the animation in one prompt
• Mention desired timing (e.g., "each element should appear 500ms after the previous one")
• Specify camera aspect ratio if you know the target (16:9 for video, 1:1 for social)
• Ask the AI to use save_checkpoint after creating — makes iteration easy
• For complex diagrams, start with create_animated_scene then refine with individual tools