User Flow Mapping

This skill enables the agent to create detailed user flow diagrams that map every step, decision point, error state, and success path a user encounters while completing a task in a product. The agent produces three types of flows — task flows (single path, no decisions), user flows (multiple paths with decision branches), and wire flows (flows annotated with screen wireframes) — using Mermaid diagram syntax for portability. Each flow includes annotations for conversion metrics, drop-off risk points, and optimization opportunities.

Workflow

1. Define the Flow Objective and Scope: Identify the specific user goal being mapped (e.g., "Complete a purchase," "Reset a password"). Determine the entry points — how the user arrives at the start of the flow (direct link, homepage navigation, email CTA, push notification). Establish the success criteria and the scope boundary so the diagram does not expand indefinitely.

2. Identify All Steps and Decision Points: List every screen, action, and system response in sequence. Mark decision points where the user or the system branches (e.g., "Is the user logged in?" or "Did payment succeed?"). Include error states, validation failures, and retry loops. For each step, note whether it is a user action (click, type, swipe) or a system action (redirect, API call, email sent).

3. Map Happy Path First, Then Edge Paths: Draw the ideal path from entry to success first. Then layer in alternative paths: what happens if the user is not logged in, if validation fails, if the session times out, if the payment is declined. Each branch should terminate in either a success state, an error recovery path, or an exit point.

4. Annotate with Metrics and Risk Points: At each step, note the relevant metric: page view count, click-through rate, form completion rate, drop-off percentage. Flag high-friction steps where users are likely to abandon (multi-field forms, account creation walls, payment pages). Suggest specific optimizations for each risk point.

5. Generate the Mermaid Diagram: Produce a clean Mermaid graph TD diagram using consistent node shapes: rounded rectangles () for pages/screens, diamonds {} for decisions, rectangles [] for actions, and double-circles (()) for start/end states. Use descriptive labels and color annotations via style directives to highlight error paths in red and success paths in green.

6. Review and Iterate: Walk through the diagram with the user to verify completeness. Check that every branch terminates, that no orphan nodes exist, and that the flow accurately reflects the actual product behavior including edge cases.

Usage