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'.
When & Why to Use This Skill
This Claude skill enables the creation of clear, text-based ASCII diagrams to visualize UI/UX user flows, screen transitions, and navigation paths. It helps designers and developers document user journeys and complex feature logic directly within the chat interface, facilitating better communication and architectural planning without needing external design tools.
Use Cases
- User Journey Documentation: Mapping out the end-to-end steps a user takes to achieve a specific goal within an application to identify friction points.
- Navigation Flow Design: Visualizing the structural connections and transitions between different screens or pages of a website or mobile app.
- Feature Logic Mapping: Defining conditional branching, decision points, and exception handling flows for new product features during the technical design phase.
- Rapid Prototyping: Creating low-fidelity visual representations of application logic during early-stage brainstorming and requirement gathering sessions.
| name | ux-flow-diagram |
|---|---|
| description | "[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'." |
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