iterel
/

Workflow

Flows and planning

Map journeys, structure the product, and turn decisions into screens worth building.

User-facing guide
Jump to first section

The flow editor

Open it from Architecture, User Flows in the sidebar. The canvas is a visual editor where you create and connect nodes.

Node types

  • Screen — a page or view in your product
  • Decision — a branching point where the user makes a choice
  • Action — something the user does (click, submit, etc.)
  • Entry and Exit — where users enter or leave the flow

Connections

Draw connections between nodes by dragging from one node's output handle to another node's input handle. Label connections to describe what triggers the transition (for example, "clicks Sign Up").

Canvas controls

  • Click and drag on empty space to pan
  • Scroll to zoom in and out
  • Click a node to select it and see its properties on the right
  • Drag a node to reposition it
  • Use auto-layout to automatically arrange nodes for readability

Generating flows

Ask the Conductor or click the generate button to create flows from your strategy and research context. You can then edit, add, remove, or reorganize nodes manually.

The backend plan tab

The flow editor has two tabs: User Flows and Backend Plan. Click the Backend Plan tab to switch to architecture-level planning. See Backend architecture for details.

Architecture summary panel

An architecture summary panel provides a high-level view of how screens, services, and data models connect. This is useful for aligning the team before moving into design or engineering.