Skip to main content

Building flows

This page walks through every gesture the editor supports while you are authoring a flow: adding, editing, removing, and arranging steps. It applies to the editor embedded on the flow card and the large editor view — both are editable canvases.

A flow is editable whenever the flow status is Draft. If you try to edit a Published flow, the editor automatically spawns a draft version for you and switches the page to that draft — you can then continue editing as normal.

Anatomy of a step​

Every step on the canvas is drawn as a square block with:

  • An icon in the middle that represents the action type.
  • A description underneath (three lines maximum) that you provide in the step configuration.
  • A small remove button (×) in the top-right corner. This button only appears when you hover over the step.
  • A small add button (+) hanging off the right edge. This button appears on the last step of each sequence so you can extend the flow.

Some steps are groups — they contain branches (for example, a decision step with yes and no paths). Groups have the same icon/description, and in addition sprout downward connections that lead into each branch.

Add a new step​

There are three places you can add a step. In all three cases, clicking the + button opens a picker where you choose what kind of step to add, and then takes you straight into that step's configuration.

  • At the end of a sequence. Hover the last step; a green + button appears on its right edge. Click it to append a new step.
  • Between two existing steps. Hover the connection line between them — the line lights up and a green + button appears at its midpoint. Click it to insert a step there.
  • Inside an empty branch. A group with a branch that has no steps yet shows a dashed placeholder block with a large + in the middle. Click the placeholder to add the first step of that branch. You can also add into a non-empty branch by hovering the connection that leads into it, exactly like between any other two steps.

Edit a step​

Click any step once to open its configuration card. When the card closes, the canvas picks up any changes you made (description, parameters, etc.) and redraws the step.

Remove a step​

Hover over the step you want to remove; a small red × button appears in its top-right corner. Click it to remove the step. Any connections that ran into or out of the step are stitched back together automatically.

Arrange steps​

The editor starts every flow with an automatic layout that places steps left-to-right along the execution path and stacks branches vertically under their parent group. This auto-layout is good enough for most flows, but you can always fine-tune the arrangement by hand.

  • Drag a step to a new position. The new position is persisted immediately, so it stays put when you add or remove other steps.
  • Drag a group and its children tag along, preserving the relative arrangement of the branch.
  • Double-click a step to reset its position back to the automatic layout slot. This is the quickest way to "undo" an accidental drag. Double-click a group to reset the whole group — children follow the same delta so the group's inner layout stays intact relative to the header.

Because every auto-placed position is also persisted, a freshly added step will slot in next to its neighbours without re-shuffling the whole flow. If two auto-placed steps would end up on top of each other, the editor nudges the explicit sibling just far enough to make room.

Connections and branches​

You do not draw connections yourself — they follow from the structure of the flow. Sequential steps are wired left-to-right through their side handles. Groups also have a bottom handle that drops into each of their branches; the branch label (yes, no, and so on) floats over that connection so you can see at a glance which path is which.

If you want to add a step into a specific branch, use the + button or the ghost placeholder described under Add a new step — adding "after the group" would put the step after the group as a whole, not into one of its branches.