How to Make an Animated Diagram That Explains Itself

To make an animated diagram, you do not animate anything — you put the diagram's parts in the order a reader should meet them, write one sentence per step, and let a player reveal them in sequence. The animation is the reveal. In Diagramium that means setting the present order, adding a note to each step, pressing Present to watch it play, and then either sharing the live player or exporting the sequence as an animated SVG, a GIF or a video. The result is a diagram that explains itself without you standing next to it.

Live interactive diagramUse the player controls to follow the steps

How coffee gets from farm to cupPlaying silently in this guideWatch with narration

What this diagram shows

1. The animation starts with ripe coffee cherries on the tree.
2. Pickers hand-pick only the ripe cherries.
3. The beans are washed and dried, then milled and graded.
4. They are shipped to the roastery and roasted to a profile.
5. The roasted beans are ground fresh.
6. Hot water brews the grounds, and the last step is the finished cup.

Why sequence beats motion

A complex diagram shown all at once has a specific failure: the reader's eye lands somewhere arbitrary, and they spend the first thirty seconds working out where to start instead of understanding anything. Every part is competing with every other part.

Revealing it in order removes that competition. At any moment there is exactly one new thing, and everything already on screen is context the reader has been given. This is why the useful kind of diagram animation is progressive disclosure rather than movement — sliding, spinning and bouncing add nothing a reader can use.

Animate the explanation, not the picture. A diagram that moves is a distraction; a diagram that arrives in order is a lesson.

It also solves a problem static diagrams cannot. A finished picture shows the result of a process. A sequenced one can show the process, which is why the example at the top of this page — nine stages from coffee cherry to cup — is comprehensible in a way the same nine boxes shown simultaneously would not be.

How to make one, step by step

1. Build the diagram normally first. Get the content right before thinking about sequence. Animation cannot rescue a diagram that is wrong or overcrowded.
2. Decide the order a reader should meet things. Usually this is the order the process happens, but not always — for an architecture diagram it is often "the thing the user touches first, then what it calls". Set it with present-order mode (press O) and click the shapes in the order you want.
3. Write one note per step. One or two sentences saying what this step is and why it matters. This is the script, and it is where most of the value lives — the step notes are what make the diagram able to explain itself.
4. Add a "why this matters" line where a step is counter-intuitive. It renders as its own tile alongside the step, and it is the right home for the insight that would otherwise be lost when you are not in the room.
5. Press Present and watch it once, end to end. Steps that felt obvious while building often turn out to arrive in the wrong order.
6. Fix the pacing. Timing controls live in Present's settings — how long the title holds, the gap between steps, how long the finished diagram stays up at the end.
7. Choose how it travels. Share the live player, or export it. Those are genuinely different products, and the next two sections cover which to pick.

A worked example: farm to cup

The diagram playing at the top of this page is nine stages: cherries ripen, hand-pick, wash and dry, mill and grade, ship, roast, grind, brew, cup.

As a static picture, that is a row of nine boxes — accurate, and nobody reads it. What makes the sequenced version work is that each stage only makes sense given the one before: you cannot explain why beans are graded before roasting without having established milling, and the whole point of "grind fresh" lands only after the reader has watched the beans travel for eight steps to get there.

Note also what it does not do. Nothing slides in from the side. There is no easing, no parallax, no camera swoop. Each step simply appears, the previous ones stay, and a note explains the new one.

Sharing it live, or exporting a file

Two routes, and the choice mostly comes down to whether the audience should be able to control the pace.

• The live player. Present the diagram yourself, share a link, or embed the player in a page. The reader gets controls — pause, step back, replay a step they missed. This is the better option for documentation and teaching, because the reader who did not follow step four can go back to step four.
• An exported file. Animated SVG, GIF or video, for places that will not accept an iframe: a slide deck, a README, a social post, an email. The trade is that the sequence becomes fixed and the reader cannot intervene.

Exports of stills — PNG, SVG and PDF — need no account. The three animated formats (animated SVG, GIF and video) need a free account, not a subscription.

Which animated format

• Animated SVG — a single vector file that plays the reveal, typically a few kilobytes, sharp at any size, and embeddable with a plain <img> tag. No controls and no narration. This is usually the right answer for a documentation page.
• GIF — universally supported, including in slide software and chat. Much larger files, limited colour, no sound. Reach for it when the destination is PowerPoint or a messaging app.
• Video — the only format that can carry a voice track, and the right choice for a course, a conference talk recording or a product page. Also the largest file.

Sequenced explainers you can watch and edit

Each of these was built as an ordinary diagram and then ordered and narrated. Press play on any of them.

Adding narration

Present mode can read each step aloud while it plays, using the step's label and its note — which is the same text you already wrote as the script. For a video export there is a "Add voice narration" option that records that voice into the file; because browsers cannot capture their own audio directly, it asks you to share your screen with system audio enabled, and runs a check first so you find out before rendering rather than after.

Some diagrams in the gallery ship with professionally baked narration; those are marked Narrated and play their studio track instead of a synthesised voice.

Best practices

• One idea per step. If a note needs three sentences to cover two things, it is two steps.
• Keep the diagram legible at the final step. The reveal ends with everything on screen, and if that state is unreadable, animating it only delayed the problem.
• Write notes as speech. Read them aloud while drafting. Anything you would not say out loud is too dense.
• Twelve steps is a lot. Past that, viewers lose the thread — split it into two diagrams.
• Give the reader controls when you can. Autoplaying an unstoppable animation is exactly what WCAG 2.2.2 (Pause, Stop, Hide) asks you to avoid for anything that moves for more than five seconds.
• Respect reduced-motion preferences on your own page. If you embed an animation, honour the visitor's prefers-reduced-motion setting — some people get motion sickness from animation they did not ask for.
• Put the text somewhere too. A step summary next to the animation is readable by people using screen readers, by search engines, and by anyone whose connection failed.

Common mistakes

• Animating for the sake of it. A four-box diagram does not need a reveal. Sequence earns its keep when order carries meaning.
• Notes that narrate the obvious. "This is the database" adds nothing; "this is the only shared datastore, which is why it is the bottleneck" does.
• Pacing set for the author. You know what comes next; the audience does not. When in doubt, slower.
• Exporting a GIF of a diagram with fine text. GIF's colour handling makes small type mushy. Use animated SVG or video.
• An animation with no still fallback. Always keep a PNG or SVG for contexts that cannot play anything.
• Treating the animation as the documentation. The text underneath is what is searchable, quotable and readable in a hurry.

In short

An animated diagram is an ordered one. Build the diagram, set the order deliberately, write a sentence per step, and let a player do the revealing. Share it live where the reader should control the pace, and export an animated SVG, GIF or video where they cannot. Then put the step summary in text beside it, so the explanation survives without the animation.

Open any diagram in the template gallery, press Present, and watch how the ordering does the work — or start your own in the flowchart editor and set the order with O.

Questions people actually ask

What is an animated diagram?

A diagram that reveals its parts in a deliberate order, one step at a time, usually with a short note explaining each step, rather than presenting everything at once. The useful form is progressive disclosure — the parts appear in sequence — not movement for its own sake.

How do I animate a diagram without any animation software?

Set the order in which the shapes should appear, write a note per step, and use a presentation mode that reveals them in that order. No keyframes or timelines are involved; the sequence and the notes are the whole specification.

What file format should an animated diagram use?

Animated SVG for a documentation page — small, sharp at any size, works in an <img> tag. GIF for slide decks and chat apps. Video when you need a voice track. Or skip files entirely and embed the live player, which gives the reader controls.

Can an animated diagram be narrated?

Yes. Present mode reads each step's label and note aloud as it plays, and a video export can record that voice into the file. Some gallery diagrams ship with a studio-recorded narration track instead of a synthesised voice.

Are animated diagrams bad for accessibility?

They can be, and the fixes are well established: give the viewer controls to pause and step back, honour the reduced-motion preference on pages where you embed one, and publish a text summary of the steps alongside it. An animation that autoplays, cannot be paused and has no text equivalent fails on all three.

How many steps should an animated diagram have?

Between four and twelve. Fewer than four and the sequence adds nothing over a static picture; more than twelve and viewers lose the thread before the end.