User Flow Diagram
- 1.1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
user-flow-diagram is a design agent skill that generates user flow diagrams mapping screens, decisions, branches, and error paths for developers and designers who must visualize how users accomplish goals in a product.
About
user-flow-diagram is a design agent skill that creates clear flow diagrams showing how users move through a product to accomplish goals. The skill models six diagram element types: entry point, screen or page, decision diamond, user action, system process, and end point. Outputs include decision branches and error paths so engineering and design teams align on navigation logic before implementation. Use user-flow-diagram when you need a structured map of onboarding, checkout, settings, or multi-step workflows rather than wireframe pixels. The result is a shareable UX artifact that informs routing, state handling, and edge-case coverage in frontend and backend design discussions.
- Creates standardized flow diagrams using entry points, screens, decisions, actions, system processes and endpoints
- Supports task flows, user flows, and wire flows with wireframe thumbnails
- 7-step creation process: define goal, identify entry, map happy path, add decisions, map errors, mark exits, note system
- Includes annotations for screen content, decision criteria, error handling, system events and async processes
- Delivers one focused flow per user goal starting with the happy path
User Flow Diagram by the numbers
- 1,085 all-time installs (skills.sh)
- +53 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #367 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagramAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you diagram user navigation and decision paths?
Generate clear visual maps of how users navigate decisions, branches, and error paths in their product.
Who is it for?
Developers and designers prototyping multi-step product flows who need decision branches and error paths documented before UI build-out.
Skip if: Teams that need high-fidelity visual mockups, component-level design systems, or production frontend code instead of flow logic maps.
When should I use this skill?
A developer or designer asks for a user flow diagram, journey map with branches, or visualization of screens, decisions, and error paths.
What you get
User flow diagram with entry points, screens, decisions, actions, system processes, error paths, and end points.
- user flow diagram
By the numbers
- Covers six flow diagram element types: entry point, screen, decision, action, system process, and end point
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use user-flow-diagram for logic and path mapping; use wireframing or UI skills when you need visual layout and component styling.
FAQ
What elements does user-flow-diagram include?
user-flow-diagram produces diagrams with entry points, screens or pages, decision diamonds, user actions, backend system processes, end points, plus explicit branches and error paths through the flow.
When should developers use user-flow-diagram?
user-flow-diagram fits early prototype and validation work when a team must agree on navigation, branching logic, and failure handling before wireframes or frontend implementation begin.
Is User Flow Diagram safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.