The best tool to animate a diagram depends on what you start from and where the result goes. For a diagram you will present live, PowerPoint or Keynote builds are hard to beat, and both export to video. For a hand-drawn look, Excalidraw plus the open source excalidraw-animate tool replays your drawing element by element. For precise, programmatic motion, Manim (Python) gives total control, and After Effects does the same by hand. Figma Smart Animate suits UI flows but has no native video export. Mermaid stays mostly static. If the diagram is part of a narrated explanation, a document-first tool like openCanviz draws each part as the voiceover reaches it, so you write the explanation rather than a timeline.

What "animate a diagram" usually means

People use the phrase for three different jobs, and most disappointments come from picking a tool built for a different one.

1. A build. The diagram appears in parts, in the order you explain it. This is the common case: an architecture, a flowchart, a pipeline. There is a separate guide on how to make a diagram animate step by step that covers the order itself.
2. A transformation. Something moves or changes shape: a box slides from one layer to another, a list reorders, a graph morphs into a different graph.
3. A flow. The structure stays still and something travels along it: packets along edges, data through a pipeline, a token through a model.

Slides are best at builds. Motion tools and code are best at transformations. Flow is handled well by code and by tools with edge animation, and badly by most others.

The comparison

PowerPoint and Keynote

Most engineers already have one of these, and for a build they are genuinely good. Put each shape and its label in a group, add an Appear or Fade animation per group, then reorder in the Animation Pane (PowerPoint) or Build Order (Keynote) so it follows your explanation rather than the order you drew things in.

For transformations, PowerPoint's Morph transition and Keynote's Magic Move animate objects that appear on two consecutive slides, interpolating position, size and colour. Duplicate the slide, move the boxes, apply the transition, and the change animates. That covers a surprising number of "this service moves behind the queue" moments.

Both export to video, so a presented build can become a file. The limits: pen-stroke drawing is awkward, timing by hand gets tedious past a few dozen steps, and the narration is a separate track you have to line up yourself. If you already have a deck, converting PowerPoint slides into a video covers that route.

Excalidraw with excalidraw-animate

Excalidraw is the default sketchy whiteboard for a lot of engineering teams, and its look is a big part of why: it reads as thinking, not marketing. The editor itself does not animate, but excalidraw-animate, an open source tool by Daishi Kato, loads an Excalidraw drawing and replays it element by element as if being drawn. Each element has an order and a duration you can set, and elements left at the default animate in the order they were created.

It exports an animated SVG, which is handy for docs and READMEs, and a WebM video, which the project itself describes as not perfect, suggesting screen capture as a fallback. Several other community projects add keyframe timelines on top of Excalidraw, if you need more than a replay.

Best for: turning a diagram you already sketched into a short, silent build. Less suited to: narration, or anything longer than a minute.

Figma Smart Animate

Smart Animate interpolates matching layers between prototype frames, which makes it excellent for UI flows: a card expanding, a menu sliding, a state change. Designers already work this way, so it is natural for product diagrams that are really screens.

Figma's own export is for static assets (PNG, JPG, SVG, PDF). To get a video of a Smart Animate prototype you screen-record it or use a community plugin that renders it to GIF or MP4. That is workable, but it is a step people often do not expect.

After Effects

If you need frame-accurate motion and a designer is available, After Effects can do anything on this list. Lines drawing themselves (trim paths on shape layers), objects moving along curves, a camera pushing into one service of an architecture: all routine. Agencies make polished explainers this way.

The cost is time and skill. A two-minute diagram explainer is days of work for someone fluent, and every change to the diagram is a change to the animation. It is the right tool for a hero piece that will run for a year, and usually the wrong one for a diagram that will be out of date next quarter.

Manim

Manim is the Python library 3Blue1Brown built for his videos, now maintained as Manim Community Edition under an MIT licence. A scene is a class; each self.play(...) call is a step, with animations like Create, Write and Transform. For engineers it has a big advantage: the animation is code, so it diffs, reviews and regenerates.

It is strongest at transformations and mathematical structure, where its precision is unmatched. For a plain architecture build it can feel like a lot of code for boxes and arrows, and narration is still a separate track you time against the animation.

Mermaid

Mermaid deserves a place because so many diagrams already exist in it, in READMEs and docs. Its diagrams are static by design. Recent versions (11.5 onwards) let you give a flowchart edge an id and set it to animate, which draws a moving dash along the edge and is good for showing flow direction. That is a flow effect, not a step-by-step build.

For a build, people usually put Mermaid in a slide framework like reveal.js and reveal parts with fragments, or redraw the diagram in a tool on this list. Treat the Mermaid source as your build list: the order of the lines is often close to the order you would explain it.

openCanviz

openCanviz starts from the explanation rather than the diagram. You paste a document, notes or a script, set a target length, and it drafts chapters, narration and a drawn visual for each beat, in whiteboard, doodle on paper, painted, cutout or poster style. The diagram for each beat builds as the narration explains it, so the order you wrote is the order things appear, and narration and drawing are already in time with each other.

Each scene is editable afterwards: click a label to change it, rewrite a line, redraw a scene. You can keep the generated voice or replace it with your own recording. The honest limits: you do not place every stroke by hand the way you would in After Effects, and it is a poor fit for a silent five-second loop for a README, where excalidraw-animate or a Mermaid edge animation is simpler.

Which one to pick

• Presenting live to your team: PowerPoint or Keynote builds.
• A silent sketch for docs or a README: Excalidraw with excalidraw-animate, or Mermaid edge animation for flow.
• A UI flow: Figma Smart Animate, recorded.
• Exact maths or algorithm motion you want in version control: Manim.
• A polished marketing piece with a designer: After Effects.
• A narrated explainer of a system or process, made in an afternoon: openCanviz. Related reading: best whiteboard animation software.

Make it

1. 1

   Name the job

   Build, transformation or flow. Most engineering diagrams are builds, and that one choice rules half the list in or out.

2. 2

   Write the build order

   Number every element in the order you would explain it aloud. This list works in any tool and is the part most people skip.

3. 3

   Decide whether it needs a voice

   Silent and short, use a slide build or excalidraw-animate. Narrated and longer than a minute, use a tool that ties narration to the drawing so you are not lining up audio by hand.

4. 4

   For a narrated version, paste the explanation

   In openCanviz, paste the explanation in build order, pick whiteboard style and a target length, and review the draft scene by scene.

5. 5

   Check every label

   Whatever the tool, compare each label and arrow direction with the real system before you share it. A wrong arrow in an animated diagram is more convincing, not less.

Common questions

What is the free option? Excalidraw, excalidraw-animate, Manim and Mermaid are free and open source. PowerPoint and Keynote you may already have. openCanviz is free to start, with a watermark on free-tier exports.

Can I animate a diagram I already have as an image? Not as a real build, because a flat image has no separate parts. Rebuild it from shapes in a slide tool or Excalidraw, or describe it in a script and have it redrawn.

Which tool is best for system design diagrams? For a live design review, slides. For a recorded walkthrough others will watch later, a narrated build, because the voice explaining each hop is the part a static diagram cannot carry.

Does animation help or is it decoration? It helps when it controls order: a viewer sees one new thing at a time, while it is being explained. It is decoration when everything bounces in for no reason. Judge a tool by how easily it lets you control order, not by how many effects it has.