# Animating a flow

> Making a connector show movement - the four styles, speed and direction, the loop length, and which exports carry the animation.

Source: https://www.revquix.com/docs/canvas/animating-a-flow
Last verified: 2026-09-04

---

This is the thing Canvas has that most diagram tools do not. A connector can carry a **flow** -
movement along the line - and the animation survives into the export, so a system diagram can
actually show the request going somewhere.

## Turning it on

**Select a connector.** The flow panel appears at the bottom of the board, and only while something
that can carry a flow is selected.

Flow settings are part of the drawing, so `⌘ Z` undoes them like anything else.

## The four styles

| Style     | What it reads as                                                                               |
| --------- | ---------------------------------------------------------------------------------------------- |
| **Dash**  | Even dashes travelling along the line. The default, and what most system diagrams use.         |
| **Dot**   | The same travel at a finer grain - quieter on a busy board.                                    |
| **Pulse** | One bright band that fades at both ends. Reads as throughput rather than as discrete messages. |
| **Comet** | A head with a tail behind it. The asymmetry makes the direction obvious without an arrowhead.  |

Pick by what you are describing: discrete calls read well as dashes or dots, sustained traffic reads
better as a pulse.

## Speed and direction

**Speed** is Slow, Normal or Fast.

**Direction** is forward or reverse along the connector. Reverse exists for a response path drawn in
the same direction as its request - you do not have to redraw the arrow backwards to show a reply.

## Loop length

The board has one **loop length** that every flow on it shares, chosen from a small set of options.
It is the length of the exported animation before it repeats.

> **Note** - Why speed comes in steps rather than a free slider
>
> An exported loop has to end exactly where it began, or the animation visibly jumps every time it
> repeats. That means the number of cycles inside the loop has to be a whole number, so the speed is
> snapped to a value that divides cleanly into the loop length.
>
> A free slider would let you pick a speed that cannot loop seamlessly, and the flaw would only appear
> in the export.

## Getting it out

Once any connector has a flow, the export menu grows an animated group: **animated SVG**, **GIF**,
and **MP4** where your browser can encode video.

Animated SVG is usually the best of the three - it is a vector and has no colour ceiling. Full detail
in [exporting a board](https://www.revquix.com/docs/canvas/boards-and-export).

> **Warning** - Design for the format if you are exporting GIF
>
> GIF holds 256 colours. Flat fills and solid strokes encode cleanly; gradients, soft shadows and
> small anti-aliased text band and dither. That is a property of GIF, not of Canvas - and it is why
> the board's surface texture never reaches an export.

An animated board also embeds into a blog post with the animation intact - see [embedding a board in a post](https://www.revquix.com/docs/canvas/embedding-a-board-in-a-post).

## Related

- [Exporting a board](https://www.revquix.com/docs/canvas/boards-and-export) - Choosing between the animated formats.

- [Embedding a board in a post](https://www.revquix.com/docs/canvas/embedding-a-board-in-a-post) - Where an animated diagram earns the most.