user-flow-diagram
owl-listener/designer-skills
Diagram screen-level paths, decisions, and branches to map feature traversal.
What is user-flow-diagram?
Creates flow diagrams showing how users move through a product to accomplish goals, including decision points, branches, and error paths. Use this when specifying the step-by-step navigation and logic of a feature; for emotional user experience arcs, use journey-map instead.
- Map entry points, screens, decisions, actions, system processes, and end points
- Create task flows (linear), user flows (multiple paths), and wire flows (with wireframe thumbnails)
- Add decision branches, error paths, and recovery flows to diagrams
- Annotate flows with screen names, decision criteria, error conditions, and system events
- Label connectors with triggers and actions to clarify flow logic
How to install user-flow-diagram
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagramHow to use user-flow-diagram
- 1.Define the user goal the flow accomplishes
- 2.Identify entry point(s) where users begin the flow
- 3.Map the happy path first (main success scenario)
- 4.Add decision points and branches for different user choices or conditions
- 5.Include error paths and recovery steps for failure scenarios
- 6.Mark exit points and flow completion states
- 7.Annotate all elements with screen names, decision criteria, and system actions
- 8.Review for readability and consistent notation
Use cases
- Specify the step-by-step navigation for a new feature or product flow
- Document branching logic when users make different choices (e.g., sign up vs. login)
- Map error handling and recovery paths in critical user journeys
- Create wire flows combining flow diagrams with wireframe thumbnails for design handoff
- Visualize system processes and async operations happening behind user actions
- Product designers planning feature navigation
- UX researchers documenting user paths and decision points
- Product managers clarifying feature requirements and edge cases
- Engineers implementing complex multi-step workflows
user-flow-diagram FAQ
Use user-flow-diagram for screen-level navigation and decision logic. Use journey-map when you want to capture the emotional end-to-end experience and user feelings across touchpoints.
Task flow shows a single linear path for one specific task. User flow maps multiple paths based on user type, choices, or conditions.
Yes. Include error conditions, error messages, and recovery paths so the diagram reflects real-world usage and edge cases.
Start with the happy path, then add complexity incrementally. If a flow becomes too dense, split it into separate diagrams for different user types or sub-goals.
Label each arrow with the trigger, action, or condition that causes the transition (e.g., 'User clicks Submit', 'Email verified', 'Payment failed').
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: user-flow-diagram
description: Diagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use journey-map (design-research).
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
- Define the goal the flow accomplishes
- Identify the entry point(s)
- Map the happy path first
- Add decision points and branches
- Map error paths and recovery
- Mark exit points
- 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
user-persona
Build research-grounded personas with goals, frustrations, and behavioral patterns for consistent user reference.
ux-writing
Write clear, helpful interface copy that guides users through your product.
version-control-strategy
Define versioning strategy for design files, components, and libraries to keep collaboration organized and traceable.
visual-hierarchy
Establish visual hierarchy through size, weight, color, spacing, and position to guide user attention.
von-restorff-effect
Make one element stand out by differentiating it from its surroundings to capture attention and memory.
wireframe-spec
Specify wireframe layouts with content priority, component placement, and interaction annotations.