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
code
┌─────────┐ │ Screen │ ← Screen/Page └─────────┘ ╔═════════╗ ║ Screen ║ ← Start/End screen (emphasis) ╚═════════╝ ((Action)) ← User action <Decision?> ← Condition/Branch point [Process] ← System process
Connection Lines
code
───→ Unidirectional flow ←──→ Bidirectional flow - - → Optional/conditional flow ═══→ Main flow (emphasis)
Flow Patterns
Linear Flow (Sequential)
code
╔═══════════╗ ┌───────────┐ ╔═══════════╗ ║ Start ║───→│ Step 1 │───→║ End ║ ╚═══════════╝ └───────────┘ ╚═══════════╝
Branching Flow
code
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