How to Make an Animated Process Diagram or Flowchart Video

How to build an animated process diagram in 6 steps

Whatever moves is what the viewer looks at, so the order in which pieces appear matters more than how they look. Plan the order first and the design second.

1. Write the steps in order. Number them. Four to seven steps fit a phone screen. With more than that, split the process into two diagrams or zoom into one part.
2. Shorten every label. "Customer places order" becomes "Order". The voice explains, the diagram labels. Aim for one to three words per box.
3. Pick an icon per step. A simple line icon for each box helps people remember the flow. Say "simple line icons, same stroke" so they match.
4. Choose the flow direction. Top to bottom fits 9:16. Left to right fits 16:9. A loop works for cycles that repeat, and a branch works for yes or no decisions.
5. Time it to the narration. Upload your voice, write a script for an AI voice, or give each step a fixed length of about 2 to 3 seconds if there is no voice.
6. Hold the whole picture. End on the complete diagram for two or three seconds so viewers can take it in, or screenshot it.

A flowchart prompt to paste into Otto

Adapted from the way Videotto users brief Otto for clean 2D explainers. Replace the steps with yours and keep the colours or swap in your brand hex codes.

Create a clean 2D animated process diagram, 20 seconds, 9:16 vertical.
STEPS (top to bottom): 1 [step], 2 [step], 3 [step], 4 [step], 5 [step].
DESIGN: warm off white background #F6F3EE, charcoal boxes outlined in #2B2B2B, one accent #E8572A for the active step. Simple line icons, same stroke width, one per step.
TYPE: one clean sans serif, labels of one to three words.
ANIMATION SEQUENCE:
0 to 2 s: title draws in at the top: [title].
2 to 15 s: each step appears in order. The arrow draws first, then the box scales up from its tip, then the icon and label fade in. The active step is in the accent colour, earlier steps return to charcoal.
15 to 18 s: a small dot travels the whole path from step 1 to step 5.
18 to 20 s: hold the full diagram.
SOUND: a soft pop per step, light music. No voice.
RESTRICTIONS: keep the camera still, no bouncing, no 3D, nothing outside the steps listed.

Shorter flowchart prompts people use

• "Add simple diagrams between short cuts of the speaker."
• "Draw the flow as he explains it, one box per step."
• "Thin white connecting lines animate outward from the highlighted step."
• "Make it a loop: the last step connects back to the first."
• "Same diagram, but 16:9 and left to right."

Worked example: a 20 second order flowchart

Example only, built to show the timing. The input was five steps for how an online order gets delivered: Order, Payment, Packing, Shipping, Delivered. The prompt above was used with the title "How your order reaches you" and no voice.

With a voiceover instead of fixed timings, the same five steps would run closer to 30 seconds, since each step would wait for its sentence.

Sizes and timings for flowchart videos by platform

The same diagram usually needs two versions: a vertical one for shorts and a wide one for YouTube, slides or a help page. The flow direction should change with the frame.

For a sense of effort: building a five step animated flowchart by hand in After Effects typically takes a couple of hours once you count drawing, keyframing and timing, and PowerPoint or Keynote with Morph transitions can get a simpler version done in under an hour. Tools like Lucidchart or Miro are great for drawing the static chart but are not built for timed animation. With Otto the work is mostly writing the step list and checking the result.

Process diagram mistakes that confuse viewers

• Showing everything at once. A full diagram on frame one is a puzzle. Build it in the order you explain it.
• Long labels. Sentences inside boxes are too small to read on a phone. Keep labels to three words.
• Arrows going every direction. Pick one flow direction and keep it. Crossing lines confuse more than they explain.
• No highlight on the active step. If every box looks the same, viewers lose their place. Use the accent for the step being explained.
• Steps that move too fast. Under about 2 seconds per step, people see boxes but not labels. Slow down or cut a step.

Flowchart shapes for different processes

Not every process is a straight line. Choosing the right shape is half the explanation, so name it in the prompt.

For a whole system with parts that talk to each other, start with the core box in the centre and add the others around it as they are named. For people and reporting lines, an org chart is the better shape, and we cover it separately.

FAQ