User Flow Diagramby Owl-Listener

User Flow Diagram Skill.

Show the routes a user can take to complete one goal.

Prototyping
User Flows

Source Review · User Flow DiagramSKILL.md

Task Prototyping Produces • A flow diagram for one user goal. • Labeled decisions, triggers, background operations, and exits. • Error and recovery paths alongside the successful route. Before You Start No diagramming application is required by the source; the chosen output format must preserve clear notation.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Map Paths, Decisions, and Recovery

A screen-level flow-diagram guide with standard elements, trigger labels, system annotations, and recovery branches.

Source-based workflowNot an execution benchmark

The Working Approach

User Flow Diagram maps movement through a product at screen and action level. It distinguishes entry points, screens, decisions, user actions, background processes, and endpoints so a diagram can communicate both the route and what causes each transition.

The source recommends starting with the happy path, then adding branches, errors, recovery, and exits. That ordering keeps a flow readable without treating failure as an afterthought. It also differentiates a linear task flow, a branching user flow, and a wire flow with screen thumbnails.

Expected Deliverables

A flow diagram for one user goal.
Labeled decisions, triggers, background operations, and exits.
Error and recovery paths alongside the successful route.

See the Example Brief

From Brief to Review

01
Set the Goal and Entry
Identify what completion means and where the user can begin.
02
Draw the Main Route
Map screens and actions using a consistent notation before adding branches.
03
Add Decisions and Recovery
Label conditions, system events, delays, errors, and exits so every arrow has a reason.

02 When to Use It

When to Use It

No diagramming application is required by the source; the chosen output format must preserve clear notation.

A Good Fit

Multi-Screen TasksUseful when teams need to agree on how a user reaches an outcome across screens.
Branching WorkflowsHelps expose different routes caused by permissions, choices, or failed operations.

Limits to Check

Not an Emotional JourneyIt does not replace an end-to-end journey map of feelings and touchpoints.
Not a Visual UI MockupA flow can reference wireframes, but it primarily describes routes rather than finished screen design.

Bring These Inputs

Task GoalState the outcome and completion condition.
Screens and Entry PointsSupply known views and places users can start.
Branch RulesInclude permissions, validation, failures, and system-side events.

03 Decisions That Matter

Decisions That Matter

Arrows Explain Behavior
Labeled connectors make a flow actionable; an unlabeled line hides the trigger the implementation needs.
One Goal Keeps It Legible
Splitting unrelated goals prevents one diagram from becoming an unreadable map of the entire product.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

No diagramming application is required by the source; the chosen output format must preserve clear notation.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use user-flow-diagram for inviting a teammate to a workspace. Include entry from settings and an empty-team screen, existing-account and new-account branches, expired invitations, and permission errors. Label every connector and distinguish user actions from background email delivery.

Inspect the Result

Check the actual output against these observable criteria.

Every arrow has a trigger or condition.
Completion and early exits are explicit.
At least the known failure paths have a recovery route.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: prototyping-testing/skills/user-flow-diagram/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A screen-level flow-diagram guide with standard elements, trigger labels, system annotations, and recovery branches.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

What is a wire flow?

It combines a route diagram with wireframe thumbnails so the path and rough screen structure can be read together.

Should it cover the entire product?

The source recommends one flow per goal to keep branches understandable.

How does it differ from a state machine?

A user flow describes traversal through screens and actions. A state machine specifies valid states and transitions for a focused behavior.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills