Animating a flow
Making a connector show movement - the four styles, speed and direction, the loop length, and which exports carry the animation.
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.
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.
An animated board also embeds into a blog post with the animation intact - see embedding a board in a post.
Related#
Was this page helpful?