User Flow Diagram
Map how users accomplish one goal through your product—including happy path, branches, errors, and background system steps—before you wireframe or build screens.
Overview
User Flow Diagram is an agent skill most often used in Validate (also Build frontend, Launch distribution) that creates decision-aware user flow diagrams for a single goal per flow.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagramWhat is this skill?
- Standard flow notation: entry, screens, decisions, actions, system processes, end states
- Three flow types: linear task flow, branching user flow, wire flow with thumbnails
- Seven-step method: goal, entry, happy path, branches, errors, exits, async/system notes
- Explicit error paths and recovery—not happy-path-only diagrams
- One flow per user goal with annotated criteria at each branch
- 7-step flow creation checklist
- 3 flow types: task, user, wire
Adoption & trust: 641 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know the feature list but cannot explain how a user actually moves, decides, or recovers when something fails.
Who is it for?
New flows (signup, billing, onboarding) where scope arguments happen because nobody drew the paths.
Skip if: Pure visual branding, component-level design systems, or backend-only APIs with no user-visible journey.
When should I use this skill?
Use when you need user flow diagrams showing paths, decisions, branch logic, errors, and system-side processes for a defined user goal.
What do I get? / Deliverables
You receive a structured flow diagram with branches, error handling, and system annotations ready to hand to wireframes, specs, or implementation tasks.
- User or task flow diagram with annotated nodes
- Decision criteria at branches
- Error and recovery paths documented
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Validate/prototype is the canonical shelf because flows clarify scope and testable paths before expensive UI implementation. Prototype subphase is where task flows, wire flows, and decision diamonds translate vague features into reviewable paths stakeholders can sign off on.
Where it fits
Document signup and email-verify branches before paying for UI design tools.
Show stakeholders where billing upgrades fork so scope arguments reference a single diagram.
Align agent-generated routes with the approved decision diamonds and error exits.
Capture referral-entry paths for a launch landing sequence tied to in-app destinations.
How it compares
UX path mapping skill—not a code generator, analytics dashboard, or App Store asset pack.
Common Questions / FAQ
Who is user-flow-diagram for?
Indie founders and solo designers-developers who need clear journey maps before prototyping or handing work to an agent.
When should I use user-flow-diagram?
During validate/prototype to lock scope; in build/frontend when clarifying navigation; at launch/distribution when documenting onboarding or store funnels.
Is user-flow-diagram safe to install?
It is documentation-oriented; still review the Security Audits panel on this page and the skill source before installing any designer-skills bundle.
SKILL.md
READMESKILL.md - User Flow Diagram
# User Flow Diagram You are an expert in creating clear user flow diagrams that map paths through a product. ## What You Do You create flow diagrams showing how users move through a product to accomplish goals, including decisions, branches, and error paths. ## Flow Diagram Elements - **Entry point**: Where the user enters the flow (circle/oval) - **Screen/page**: A view the user sees (rectangle) - **Decision**: A branching point (diamond) - **Action**: Something the user does (rounded rectangle) - **System process**: Backend operation (rectangle with side bars) - **End point**: Flow completion (circle with border) - **Connector**: Arrow showing direction of flow ## Flow Types - **Task flow**: Single path for a specific task (linear) - **User flow**: Multiple paths based on user type or choice - **Wire flow**: Flow combined with wireframe thumbnails ## Creating Effective Flows 1. Define the goal the flow accomplishes 2. Identify the entry point(s) 3. Map the happy path first 4. Add decision points and branches 5. Map error paths and recovery 6. Mark exit points 7. Note system actions happening in background ## Flow Annotations - Screen names and key content - Decision criteria at each branch - Error conditions and handling - System events and notifications - Time delays or async processes ## Best Practices - One flow per user goal - Start with happy path, then add complexity - Include error and edge case paths - Keep flows readable (not too many branches on one diagram) - Use consistent notation - Label every arrow with the trigger/action