ux-flow-diagram

name	ux-flow-diagram
description	[UI/UX] User flows as ASCII or Mermaid diagrams; navigation and branching. Use for flow diagram requests. Skip diagramming during early discovery when problem/users are still unclear.

UX Flow Diagram

A skill that visualizes user flows and screen transitions—ASCII (below) or Mermaid (rendered in GitHub / many editors).

When not to diagram (save time)

• Problem statement or primary user is still unknown or disputed
• You are still listing hypotheses—use bullets first, diagram after alignment
• Single linear screen with no branches—paragraph or bullet list is enough

When to Use

• Documenting user journeys
• Designing navigation flows between screens
• Defining user flows per feature
• Representing conditional branching and exception handling flows

Mermaid option (single standard)

When the user can render Mermaid (README, Notion, GitHub, many IDEs), prefer one diagram style for the whole doc:

flowchart LR
  A[Home] --> B{Logged in?}
  B -->|Yes| C[Dashboard]
  B -->|No| D[Login]
  D --> C

Use flowchart TD for top-down layouts. Keep ≤ 12 nodes per chart; split into linked subflows if larger.

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