How do I make a user flow diagram?

Describe the task you want to map, list the screens and any branch points (success vs. error, skip vs. complete), and specify the end state. Paste the description into Figviz, choose a style, and generate. Refine the prompt to adjust labels, add branches, or change the layout.

Is the user flow diagram generator free?

Yes. Every account starts with free credits you can use to generate user flow diagrams right away. Buying any pay-as-you-go credit pack removes the watermark and unlocks higher resolutions. Credits never expire.

What is the difference between a user flow and a user journey?

A user flow is a system-side diagram showing the screens and decision paths through an app. A user journey map is user-side, capturing the emotions, pain points, and motivations at each stage of an experience. User flows are used in product design and engineering specs; user journey maps are used in UX research and strategy.

What symbols are used in user flow diagrams?

The common conventions are: rounded rectangles for screens or UI states, sharp rectangles for system or off-screen actions, diamonds for decision points with Yes/No or conditional branches, ovals for start and end states, and directional arrows labeled with the action that triggers the transition. Figviz follows these conventions by default.

Can I use user flow diagrams for UX and product design?

Yes. User flow diagrams are a core UX and product design deliverable. They align teams on screen sequencing before wireframing begins, surface missing error states, and make it easy to estimate scope. Export your Figviz diagram at up to 4K resolution for Figma handoffs, Notion docs, or slide decks.

AI-Powered

User Flow Diagram Generator User Flow Diagrams

Describe any app or website journey and get a clean, labeled user flow diagram in seconds, with screens, decision diamonds, and arrows mapped out. Perfect for UX research, product specs, and stakeholder presentations.

Last updated: 2026-06-21

✓Screens and decision points✓Clean labeled arrows✓UX and product ready✓Export at 4K resolution

User Flow Diagram Generator

Style

Describe your user flow

Free to try ·

Not what you expected? Tell us

Preview

Your user flow diagram will appear here

Describe your flow and click Generate

User Flow Diagram Examples

Browse user flow diagrams made with Figviz, or generate your own above

View

App Signup User Flow

A step-by-step signup flow from splash screen to home dashboard, with email verification and error branches.

signuponboardingmobile

E-commerce Checkout User Flow

A checkout flow from cart review through payment to order confirmation, including address and payment decision branches.

e-commercecheckoutpayments

Onboarding Flow with Decision Points

A multi-step onboarding flow with decision diamonds for skipping steps or completing profile setup.

onboardingUXdecision points

Mobile App Navigation Flow

A navigation flow showing tab bar routing, deep links, and back-navigation between key app screens.

mobilenavigationapp

Website Conversion Flow

A conversion funnel flow from landing page through pricing to free trial signup and activation.

conversionfunnelwebsite

User Flow with Screens and Arrows

A richly annotated user flow with screen labels, action arrows, and numbered steps for a complete task journey.

annotatedscreensUX research

What is a user flow diagram generator?

A user flow diagram generator is a tool that maps out the path a user takes through an app or website to complete a task. Each step, screen, or decision in the journey appears as a labeled shape, connected by arrows that show direction and branching. Figviz turns a plain description of your app flow into a finished diagram with screens, decision diamonds, and labeled arrows, so you can communicate the user experience clearly without drawing by hand or wrestling with a diagramming tool.

How to make a user flow diagram

Define the task: decide which specific user journey you want to map (signup, checkout, onboarding).

List the screens and steps: write out each screen or action the user encounters in order.

Identify decision points: note any branch where the user can take different paths (success vs. error, skip vs. complete).

Describe the end state: specify where a successful journey finishes (home dashboard, order confirmation).

Generate and refine: paste the description into Figviz, choose a style, and generate. Adjust the prompt to add missing branches or rename steps.

User flow vs. flowchart vs. wireflow

A user flow focuses on the sequence of screens and decisions a person moves through, using standard shapes like rounded rectangles for screens and diamonds for decisions. A generic flowchart can model any process (business logic, algorithms) and is not specific to UI. A wireflow sits between user flows and wireframes: it shows the same paths as a user flow but replaces screen labels with low-fidelity screen sketches. Figviz generates clean user flows and wireflows; for pure logic flows, try the AI flowchart generator.

Tips for clearer user flow diagrams

Keep each flow focused on one task rather than mapping the entire app at once. Name screens and actions as users think of them, not as engineers label routes. Always show the error or failure path alongside the happy path, because that is where most usability problems hide. Use consistent shape conventions: rounded rectangles for screens, sharp rectangles for system actions, diamonds for decisions. Label every arrow with the action that triggers the transition (tap "Continue", swipe back, submit form). A well-labeled flow diagram can stand alone in a design spec without additional explanation.

Frequently asked questions

A user flow diagram generator creates visual maps of the path a user takes through an app or website. With Figviz you describe the journey in plain language and the AI produces a clean diagram with screens, decision points, and labeled arrows, ready for design specs or stakeholder reviews.

Related diagram tools

All tools →

Make your own user flow diagram with Figviz

Create a free account and get starter credits to generate your own. No credit card required.