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.
Browse user flow diagrams made with Figviz, or generate your own above
A step-by-step signup flow from splash screen to home dashboard, with email verification and error branches.
A checkout flow from cart review through payment to order confirmation, including address and payment decision branches.
A multi-step onboarding flow with decision diamonds for skipping steps or completing profile setup.
A navigation flow showing tab bar routing, deep links, and back-navigation between key app screens.
A conversion funnel flow from landing page through pricing to free trial signup and activation.
A richly annotated user flow with screen labels, action arrows, and numbered steps for a complete task journey.
Start with one of these examples, then adapt the subject, labels, data, or layout for your own use.
A step-by-step signup flow from splash screen to home dashboard, with email verification and error branches.
Create a labeled user flow diagram for a mobile app signup process. Start at the splash screen, then email and password entry, email verification success and failure branches, and end at the home dashboard. Rounded rectangles for screens, diamonds for decisions, labeled arrows. White background.
A checkout flow from cart review through payment to order confirmation, including address and payment decision branches.
Create a labeled user flow diagram for an e-commerce checkout: cart review, shipping address entry, payment method selection, payment success and failure branches, and order confirmation screen. Rounded rectangles for screens, diamonds for decisions, directional arrows. White background.
A multi-step onboarding flow with decision diamonds for skipping steps or completing profile setup.
Create a labeled onboarding user flow diagram with welcome screen, profile setup steps, and decision diamonds for "Skip" and "Complete" paths. Show branches for users who skip optional steps vs. complete all steps, ending at the main dashboard. White background.
A navigation flow showing tab bar routing, deep links, and back-navigation between key app screens.
Create a labeled user flow diagram for a mobile app navigation structure: home tab, search tab, profile tab, and settings screen. Show navigation paths between screens including back actions and deep-link entry points. Rounded rectangles and directional arrows. White background.
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.
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.
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.
Create a free account and get starter credits to generate your own. No credit card required.