Free flowchart
GIF generator

Q: How do I turn a flowchart into a GIF?

Open the slicerflow studio, build a flowchart by writing a few lines of YAML or dragging boxes on the canvas, give each box a reveal step, pick an animation, then click Export and choose GIF. You can also export PNG or JPEG.

Q: Is the flowchart GIF generator free?

Yes. slicerflow is free and open source, needs no account, and runs entirely in your browser — your flowchart never leaves your device.

Q: Can I import an existing flowchart?

Yes. You can import mermaid flowchart syntax and draw.io (.drawio / XML) diagrams and convert them into an animated slicerflow flowchart.

Q: How do I control the animation order?

Every box and arrow has a reveal step set with show:. Elements with the same step appear together; higher steps appear later, so the flowchart plays back one stage at a time.

Turn a flowchart into an animated GIF — decisions, branches and smart arrows that reveal themselves one step at a time. Write a few lines of YAML or drag boxes on a canvas; slicerflow lays it out, routes the arrows, and exports a GIF, PNG or JPEG.

Make a flowchart GIF — free How it works

No account · no install · runs in your browser · MIT open source

# a flowchart that animates step by step
title: Bug Triage
animation: pop
components:
  triage:
    items:
      start: { look: pill, text: New bug, show: 0 }
      repro: { look: diamond, text: Reproducible?, show: 1 }
      fix:   { text: Fix it, color: green, show: 2 }
      ask:   { look: note, text: Ask details, show: 2 }
      done:  { look: pill, text: Close, show: 3 }
    arrows:
      - { from: start, to: repro, show: 1 }
      - { from: repro, to: fix, say: yes, show: 2 }
      - { from: repro, to: ask, say: no, style: dashed, show: 2 }
      - { from: fix, to: done, show: 3 }

Paste this in the studio's Code tab → Export → GIF.

How to make a flowchart GIF

From blank canvas to a shareable animated GIF in four steps — no design tools, no timeline scrubbing.

Add your steps

Drag boxes, diamonds and pills onto the canvas, or type them as YAML. Arrows snap between them automatically.

Set the reveal order

Give each box a show: step. That's the order it appears in the animation — branches and all.

Pick an animation

Choose pop, fade, slide, grow and more. Arrows can flow along their path while the chart plays.

Export the GIF

Click Export → GIF for a looping animation, or PNG / JPEG for a crisp still image.

Why slicerflow for animated flowcharts

Automatic layout — no aligning boxes by hand
Obstacle-avoiding smart arrows that route themselves
Decision diamonds, pills, notes and 33 built-in icons
Step-by-step reveal so viewers follow the logic
Export animated GIF, plus 3× PNG and JPEG stills
Import an existing mermaid or draw.io flowchart
Free, open source, and private — nothing leaves your browser
Works on any device with a modern browser

Other diagram GIF generators

Flowchart GIF — FAQ

How do I turn a flowchart into a GIF?

Open the studio, build a flowchart by writing a few lines of YAML or dragging boxes on the canvas, give each box a reveal step, pick an animation, then click Export → GIF. You can also export PNG or JPEG stills.

Is the flowchart GIF generator free?

Yes — slicerflow is free and open source, needs no account, and runs entirely in your browser, so your flowchart never leaves your device.

Can I import an existing flowchart?

Yes. You can paste mermaid flowchart syntax or open a draw.io (.drawio / XML) export and convert it into an animated slicerflow flowchart.

How do I control the animation order?

Every box and arrow has a reveal step set with show:. Elements sharing a step appear together; higher steps appear later, so the flowchart plays one stage at a time.

Make your flowchart move

Build it, animate it, and export a GIF in a couple of minutes — free.

Open the studio →