UX Flow Diagram

A skill that visualizes user flows and screen transitions as ASCII diagrams.

When to Use

• Documenting user journeys

• Designing navigation flows between screens

• Defining user flows per feature

• Representing conditional branching and exception handling flows

Flow Diagram Symbols

Basic Nodes

┌─────────┐ │ Screen │ ← Screen/Page └─────────┘

╔═════════╗ ║ Screen ║ ← Start/End screen (emphasis) ╚═════════╝

((Action)) ← User action <Decision?> ← Condition/Branch point [Process] ← System process

Connection Lines

───→ Unidirectional flow ←──→ Bidirectional flow

• • → Optional/conditional flow ═══→ Main flow (emphasis)

Flow Patterns

Linear Flow (Sequential)

╔═══════════╗ ┌───────────┐ ╔═══════════╗ ║ Start ║───→│ Step 1 │───→║ End ║ ╚═══════════╝ └───────────┘ ╚═══════════╝

Branching Flow

                     Yes  ┌───────────┐
                ┌────────→│  Path A   │────┐

┌───────────┐ │ └───────────┘ │ ┌───────────┐ │ Screen │───→<Decision?> ├───→│ Result │ └───────────┘ │ ┌───────────┐ │ └───────────┘ └────────→│ Path B │────┘ No └───────────┘

Constraints

• Flows progress left-to-right, top-to-bottom

• Complex flows should be split into sub-flows

• All branch points need clear condition labels