UX Sequence Diagram

A skill that visualizes interaction sequences and system communications as ASCII diagrams.

When to Use

• Defining user-system interaction sequences

• Documenting API call sequences

• Representing event flows between components

• Designing asynchronous operation sequences

Sequence Diagram Symbols

Participants

┌───────┐ ┌───────┐ ┌───────┐ │ User │ │ UI │ │Server │ └───┬───┘ └───┬───┘ └───┬───┘ │ │ │

Message Types

────────→ Sync Request ← ─ ─ ─ ─ Sync Response

• • • • → Async Request ═══════→ Critical Message ──────X Failed/Cancelled

Sequence Patterns

Basic Request-Response

┌───────┐ ┌───────┐ ┌───────┐ │ User │ │ UI │ │Server │ └───┬───┘ └───┬───┘ └───┬───┘ │ │ │ │ Click Button │ │ │─────────────────→│ │ │ │ API Request │ │ │─────────────────→│ │ │ Response Data │ │ │← ─ ─ ─ ─ ─ ─ ─ ─ │ │ Update View │ │ │← ─ ─ ─ ─ ─ ─ ─ ─ │ │ ↓ ↓ ↓

Constraints

• Participants arranged left-to-right, closest to user first

• Time flows top-to-bottom

• Clearly distinguish sync/async messages