user-flow-diagram

Map user journeys with entry points, screens, decisions, and end points.

Updated Mar 16, 2026

Search Tags:#design #diagramming #ux #user-flow #flow-diagram #decision-logic #wireflow

Ready to run

npx skills add https://github.com/soeiroo/multifunctional-web --skill user-flow-diagram-soeiroo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: user-flow-diagram
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/user-flow-diagram
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill user-flow-diagram-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

User flow diagrams help teams visualize how users navigate a product, clarifying paths, decisions, and potential bottlenecks.

Core Features & Use Cases

Flow Diagram Elements including entry points, screens/pages, decisions, actions, system processes, and end points to map interactions.
Flow Types: Task flow, User flow, and Wire flow to cover linear, multi-path, and schematic perspectives.
Best Practices: Define goals, start with the happy path, add decision points and edge cases, and keep diagrams readable.

Quick Start

Describe a sample user flow by outlining the entry point, screens, decisions, and end points for a given goal.

Frequently Asked Questions about user-flow-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a user flow diagram for a product?▼

To create a user flow diagram, map the user journey by defining the entry point, outlining screens, adding decision branches, and specifying the end point for a given goal to visualize interactions clearly.

What is the difference between a task flow, user flow, and wireflow?▼

A task flow maps linear interactions, a user flow covers multi-path navigation with decisions, and a wireflow combines schematic screen layouts with flow logic to visualize different UX perspectives.

How do I map user journey decisions and branches in a flow diagram?▼

Map user journey decisions by starting with the happy path, then adding decision points and edge cases using precise notation for screens, actions, and system processes to keep the flow diagram readable.

Can I diagram system processes and user actions together in a UX flow?▼

Yes, you can diagram system processes and user actions together in a UX flow by using specific flow diagram elements to map interactions, goals, and decision logic across the product design.

What are the best practices for keeping multi-path user flow diagrams readable?▼

Best practices for readable multi-path user flow diagrams include defining goals upfront, starting with the happy path, adding decision points and edge cases progressively, and using precise notation for all connectors.

When do I need a wireflow diagram instead of a standard user flow?▼

You need a wireflow diagram instead of a standard user flow when you want to combine schematic screen layouts with multi-path decision logic, providing a more detailed visual perspective of the user interface interactions.