ux-flow-diagram
Creates ASCII diagrams for user flows and screen transitions. Defines symbols for screens, actions, decisions, and connections. Useful for documenting navigation paths and conditional branching in early design phases.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install cantagestudio-cosmicatlaspacker-ux-flow-diagram
Repository
Skill path: .factory/skills/ux-flow-diagram
Creates ASCII diagrams for user flows and screen transitions. Defines symbols for screens, actions, decisions, and connections. Useful for documenting navigation paths and conditional branching in early design phases.
Open repositoryBest for
Primary workflow: Design Product.
Technical facets: Designer, Full Stack.
Target audience: UX designers and product managers who need quick flow documentation without design tools.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: CANTAGESTUDIO.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install ux-flow-diagram into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/CANTAGESTUDIO/CosmicAtlasPacker before adding ux-flow-diagram to shared team environments
- Use ux-flow-diagram for design workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
---
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