More flow animation styles for connectors 15 Mar 2024

Share: has added more styles for connector flow animations. You can use animated connectors in to illustrate workflow, supply chains, electrical circuits, PERT charts - any diagram with connectors that indicate a direction.
There are several animation style settings for connectors in

Animate connectors in

  1. Select one or more connectors. To select all, right click on a blank area of the drawing canvas and choose Select Edges from the context menu.
  2. Enable the Flow Animation checkbox in the Style tab.
    Animate connectors to highlight directional flow in any diagram type

Connector animation styles

With the new style settings for connector flow animations in, you can change the flow timing, flow duration, and flow direction.

  1. Select the connector(s) you want to style.
  2. In the Style tab, click on Properties to see the detailed style settings for those connectors.
    Enable Flow Animation on your connectors in via the shape Properties in the Style tab.

Flow Duration

The default Flow Duration is 500.

  • Set a large value for a slower flow animation.
  • Set a small value (closer to zero) for a faster flow animation.
    Change the Flow Duration for fast or slow connector animations in via the Properties in the Style tab

Flow Timing

There are several different Flow Timing settings that change the flow animation’s appearance: Linear (default), Ease, Ease-in, Ease-out, Ease-in-out.
Set a variety of flow timings on animated connectors in via the connector Properties in the Style tab

These flow timings would be useful to visualise workflows with batch processing steps, or where a step incorporates wait times.

Flow Direction

The default flow animation style for connectors is Normal, flowing from the source to the target shape, whether the connector has arrows at the ends or not.

You can change the Flow Direction to Reverse, Alternate or Alternate-Reverse.
Change animated connectors to flow in another direction in via the connector Properties in the Style tab

More connector style options provides you with many different ways to style connectors, with a variety of line styles, pathing options to change how the connector bends around waypoints, a collection of different arrow ends - including those used in UML and SysML diagrams - and many more options.
Style your connector using the options in the Style tab in the format panel on the right in

Tip: You can copy and paste connector styles - this includes connector flow animation styles.

  1. Select and style one connector.
  2. Click on Copy Style in the Style tab of the format panel to copy that style.
  3. Select all of the connectors that should match that style, and click on Paste Style.

Keyboard shortcuts: There are many shortcuts for styling shapes and connectors in that will help you diagram faster.

Set a default style: Style the first connector you add, then click Set as Default Style in the Style tab. All future connectors you draw will use your custom style by default.

Learn more about styling connectors

Follow us on GitHub, Twitter, Facebook.