How to make an animated flowchart

Make an animated flowchart

A static flowchart asks the reader to find the entry point and trace the arrows themselves. An animated one does that for them: boxes appear in the order the process actually runs, and each connector draws before the box it feeds. The flowchart animator builds one from a list of steps, with no diagramming tool and no account.

A real export, animating live. The question appears before either of its branches — that ordering is derived, not typed in.

Customise Animated decision tree →

Reveal order is the whole point

The useful property of an animated diagram is that time carries meaning. If boxes fade in at random, the animation is decoration. If they appear in dependency order — nothing shows up before the thing that leads to it — then watching the animation is the same as reading the process, and the viewer never has to work out where to start.

That ordering is derived from the diagram rather than authored. The steps are projected into a graph, the graph is ranked so every node sits after everything pointing at it, and the timing falls out of the ranking. Reorder your steps and the animation reorders itself; add a branch and it finds a slot for it.

Pick the layout that matches the process

Most processes are one of a handful of shapes, and picking the right one does more for clarity than any amount of styling:

A straight sequence of steps — a process flow. The default, and usually right.
A yes/no question with two outcomes — a decision flow, which puts the branches either side of the question.
Work handed between people or teams — a swimlane, where each lane is an owner and every handoff shows as a crossing.
Reporting lines — an org chart, expanding outward from the top.
Something that repeats — a cycle, drawn as a closed loop rather than a line that stops.
Dated milestones — a timeline.

The swimlane is worth calling out because it encodes something the others cannot. The lane a box sits in says who owns that step, so a process that bounces between three teams looks busy in a way a straight sequence hides — and that visible bouncing is often the actual finding.

The same five steps as a swimlane. Every lane change is a handoff — four of them here, for one support ticket.

Customise Animated swimlane diagram →

Three ways in

Pick a template and type the steps. Fastest when you already know the shape.
Describe the process in a sentence and let it choose a template and draft the steps. Useful when you are not sure which layout fits.
Upload a picture of an existing chart — a whiteboard photo, a screenshot from a slide — and it reads the boxes and arrows into an editable diagram.

All three land in the same editor, so anything generated for you stays fully editable rather than being a one-shot result to accept or discard.

A cycle, for a process that repeats. Same steps, different claim about the work.

Customise Animated cycle diagram →

Keep it under about eight boxes

The limit is legibility, not capacity. Past roughly eight steps the boxes shrink to fit the frame, labels wrap, and the animation runs long enough that a viewer stops waiting for it. If your process genuinely has twenty steps, the honest fix is two charts — a high-level one with five boxes, and a detail chart for the one box that needed it.

Short labels help more than they should. Two or three words per box reads at a glance; a full sentence in a box turns the diagram into a paragraph with borders drawn around it.

Getting it out

For a slide deck or a document, export the SVG — it stays sharp when someone projects it. For a video walkthrough or a social post, MP4. The differences between the formats matter more here than for a text animation, because a diagram has fine detail that a 256-colour GIF will visibly damage.

If what you are showing is a quantity rather than a process, a chart is the better shape — the infographic animator covers bars, counters and stat cards. And every diagram here exports as a self-contained SVG with no runtime library.