# UX Flow Diagram

> [UI/UX] Visualizes user flows and screen transitions as ASCII diagrams. Represents navigation flows, user journeys, and screen-to-screen paths. Use when requesting 'flow diagram', 'user journey visualization', or 'navigation flow'.

- Skill: `majiayu000/ux-flow-diagram` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ux-flow-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ux-flow-diagram/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ux-flow-diagram

---


# 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