Product help

Flow Arrows Documentation

Use Flow Arrows to connect selected frames, cards, components, or sections with clean connector arrows that can be restyled and refreshed after the layout moves.

Before you start

  • Select two or more connectable layers in the order the flow should travel.
  • The Apply button creates missing arrows and updates existing arrows when the same connection is selected again.
  • Generated arrow groups keep connection metadata, so selecting existing arrow groups and clicking Apply refreshes their geometry after source or target layers move.

Main controls

  • Route chooses the connector shape: H-H, H-V, V-V, or V-H.
  • Direction switches whether the connection reads A to B or B to A.
  • Heads controls arrow markers at the End, Start, Both, or None.
  • Color, Dashed, Width, Arrow size, and Corner tune the visual style.
  • Label, Label position, Label color, Label bg, Label size, and Label offset add readable notes to the connector.

Use Cases And Click Paths

01

Connect two screens or cards

Use this when a product flow, diagram, or annotation needs one clear relationship.

  1. 1Select the source layer first.
  2. 2Hold Shift and select the destination layer second.
  3. 3Open CHTools Flow Arrows.
  4. 4Choose a Route such as H-H for horizontal layouts or V-V for vertical layouts.
  5. 5Leave Direction as A to B and Heads as End for a standard forward arrow.
  6. 6Pick Color and Width if the default blue line does not match the diagram.
  7. 7Click Apply.
One generated arrow group connects the first selected object to the second selected object.
02

Build a multi-step user flow

Use this when several screens need a quick linear path: onboarding, checkout, auth, or settings flows.

  1. 1Select the first screen in the flow.
  2. 2Hold Shift and select each next screen in order.
  3. 3Open Flow Arrows and check that the Selection counter shows the expected number of selected layers.
  4. 4Choose the Route that best matches the layout direction.
  5. 5Set Direction to A to B and Heads to End or Both depending on the diagram style.
  6. 6Click Apply.
The plugin creates connectors between each adjacent selected layer: 1 to 2, 2 to 3, 3 to 4, and so on.
03

Refresh arrows after moving frames

Use this after rearranging screens, cards, or sections that already have Flow Arrows connectors.

  1. 1Move the connected source or destination layers on the canvas.
  2. 2Select the existing Flow Arrows group, or select multiple generated arrow groups.
  3. 3Open Flow Arrows.
  4. 4Keep the same visual settings, or adjust Color, Width, Corner, Heads, or Label controls.
  5. 5Click Apply.
Existing arrow groups are rebuilt from their stored source and target metadata, so the connectors realign to the moved layers.
04

Update an existing connection without duplicates

Use this when an arrow already exists but the route, color, label, or marker style needs to change.

  1. 1Select the same source and destination layers used by the current arrow.
  2. 2Open Flow Arrows.
  3. 3Change Route, Direction, Heads, Color, Dashed, Width, Arrow size, or Corner.
  4. 4Add or edit Label if the connection needs a note.
  5. 5Click Apply.
The matching connection is updated instead of creating another arrow for the same pair.
05

Add labeled annotations to a handoff diagram

Use this when developers, PMs, or QA need context such as Success, Error, Retry, or Requires login.

  1. 1Select two or more layers to connect.
  2. 2Type the annotation into Label.
  3. 3Choose Label position: Auto, Start, Mid, or End.
  4. 4Set Label color and keep Label bg enabled when the label sits over busy canvas content.
  5. 5Adjust Label size and Label offset if the text is too close to the line.
  6. 6Click Apply.
The connector includes readable label text that travels with the generated arrow group.
06

Create reverse or two-way relationships

Use this for back navigation, bidirectional sync, dependencies, or annotation lines without a marker.

  1. 1Select the two layers to connect.
  2. 2Set Direction to B to A if the semantic direction should point back to the first selected layer.
  3. 3Choose Heads: Start, Both, End, or None.
  4. 4Use Dashed for secondary, optional, or non-primary paths.
  5. 5Click Apply.
The arrow communicates the intended direction or relationship style without manual line editing.