# User Flow Diagram Shapes: What Each One Means Canonical: https://sakura5.app/blog/user-flow-diagram-shapes/ Published: 2026-10-29 Author: the Sakura5 team · 8 min read Updated: 2026-10-29 Publisher: Sakura5 (https://sakura5.app) · support@sakura5.app > **TL;DR:** User flow diagram shapes explained: the oval, rectangle, diamond and arrow, what each means, and a full sign-up flow example that uses every one. ![User Flow Diagram Shapes: What Each One Means](https://sakura5.app/img/blog/inline/user-flow-diagram-shapes-1.jpg) The standard user flow diagram shapes are a rounded oval for the entry and exit points, a rectangle for each screen or page, a diamond for every decision the user or the system makes, and an arrow for each action that moves the user from one screen to the next. Those four cover almost every flow a product team draws, and two optional extras — a rounded rectangle for a user action and a cylinder or labeled box for a background system step — handle the rest. The shapes matter because a user flow is read by people who weren’t in the room when it was drawn: a developer estimating work, a tester writing cases, a stakeholder checking scope. If a rectangle sometimes means a screen and sometimes means a button tap, every reader has to stop and decode the chart instead of following it. This guide covers why borrowed flowchart habits cause trouble in user flows, what each shape means and when to use it, a full worked example of a sign-up flow for a meal-planning app, how to handle the cases the basic set doesn’t cover, and the questions people ask most often. ## Why user flows get messy Most people learn diagram shapes from classic process flowcharts, where a rectangle is a step and an oval is the start or end. A user flow looks similar but tracks something different: where the user *is* and what they *do* to get somewhere else. When those two ideas get mixed into the same box — “Login screen, enter password” — the chart stops being able to show that the same screen can be left three different ways. The second problem is skipping decisions. A designer draws the happy path from landing page to confirmation, and the diamond for “Email already registered?” never appears. That missing branch is exactly where developers will later ask what should happen, and where real users get stuck. The third problem is inventing shapes on the fly. A hexagon shows up for “important screen,” a star for “new feature.” In a working diagram every new shape needs a legend, and most charts don’t have one. ## The core user flow diagram shapes and what they mean Think of each shape as answering one question about the user’s journey. Keep the meanings fixed and the chart reads itself. ![The core user flow diagram shapes and what they mean — user flow diagram shapes](https://sakura5.app/img/blog/inline/user-flow-diagram-shapes-2.jpg) *Think of each shape as answering one question about the user’s journey.* ### 1. Oval (terminator): where does the user enter and leave? The rounded oval or pill marks the entry point and the exit points. Label the entry with how the user arrives: “Taps ad on Instagram,” “Opens app for the first time,” “Clicks link in reset email.” Label each exit with the outcome: “Account created,” “Abandons sign-up.” ### 2. Rectangle: which screen is the user on? Each rectangle is one screen, page, modal or sheet. Name it the way the team names it in the design file: “Onboarding 2 — Diet preferences,” not “the second one.” If a screen appears twice in the flow, draw it once and loop the arrow back rather than duplicating it; that keeps the screen count honest when someone estimates the build. ### 3. Diamond: what decides the next screen? The diamond holds a question with a small number of clear answers, and each arrow leaving it carries one answer as its label. Some diamonds are user choices (“Continue with Apple or email?”) and some are system checks (“Email already registered?”). Both belong in the diagram. ### 4. Arrow: what does the user do to move on? Arrows connect everything and point in the direction of travel. In a user flow, label the arrow with the action that causes the move: “Taps Continue,” “Swipes up,” “Waits 3 seconds.” An unlabeled arrow between two screens is a gap the developer will have to guess at. ### 5. Rounded rectangle (optional): what does the user do on this screen? When a single screen involves several actions worth showing — filling a form, picking a plan, granting a permission — some teams use a rounded rectangle for the action and keep the sharp rectangle for the screen itself. It’s a useful distinction, but only if you use it everywhere. If you adopt it, add a one-line legend in the corner. ### 6. Cylinder or dashed box (optional): what happens behind the scenes? Background work the user doesn’t see, such as saving a record, sending a verification email or charging a card, can be drawn as a cylinder (borrowed from the database symbol) or a dashed box. It also tells designers where a loading state may be needed. If you want the fuller history of these shapes, our guide to [flowchart symbols and meanings for beginners](https://sakura5.app/blog/flowchart-symbols-and-meanings-for-beginners/) explains where each one comes from. For the difference between a user flow and a broader journey map, the Nielsen Norman Group has a clear article on [user journeys versus user flows](https://www.nngroup.com/articles/user-journeys-vs-user-flows/). ## A worked example: sign-up for a meal-planning app Say you’re designing sign-up for a fictional meal-planning app called Pantry Week. The brief: a new user can sign up with Apple or email, picks a diet from 4 options, sets a household size from 1 to 6, and lands on a first weekly plan. Email users must confirm a 6-digit code that expires after 10 minutes. Here’s how the shapes map onto it. ![A worked example: sign-up for a meal-planning app — user flow diagram shapes](https://sakura5.app/img/blog/inline/user-flow-diagram-shapes-3.jpg) *Say you’re designing sign-up for a fictional meal-planning app called Pantry Week.* ### Step 1: List the pieces before drawing Write every screen, decision and system step as a plain list first. A mind map works well here: one branch for screens, one for decisions, one for background steps. In [Mindmap AI](https://sakura5.app/mindmapai/) you can type the brief above as a topic, and a Pro subscriber gets a map of its parts in seconds; you can then tap a node like “Email sign-up” to expand it into sub-steps you hadn’t thought of, such as the expired-code case. For Pantry Week the list came to 7 screens, 3 decisions and 2 background steps. ### Step 2: Place the ovals One entry oval: “Opens app for the first time.” Two exit ovals: “Sees first weekly plan” and “Closes app during sign-up.” ### Step 3: Add the screens Seven rectangles: Welcome, Sign-up method, Email entry, Code entry, Diet preferences, Household size, and Plan preview. Line them up top to bottom in the order a typical user sees them. ### Step 4: Insert the decisions Three diamonds. After Sign-up method: “Apple or email?” — the Apple branch skips straight to Diet preferences. After Email entry: “Email already registered?” — yes routes to a log-in screen, no continues. After Code entry: “Code valid and under 10 minutes old?” — no loops back to Code entry with a “Resend code” label on the arrow. ### Step 5: Show the background steps and label every arrow Two dashed boxes: “Send verification email” between Email entry and Code entry, and “Generate first plan” between Household size and Plan preview. Then label every arrow with the action: “Taps Continue with Apple,” “Enters code and taps Verify,” “Selects 4 people.” When you’re done, the Apple path is 5 screens long and the email path is 7 — a concrete number to bring to the team. The process of turning that ordered list into connected shapes is the same one we describe in [how to make a flowchart for a process](https://sakura5.app/blog/how-to-make-a-flowchart-for-a-process/); a user flow just adds screen names and action labels. ## Edge cases the basic shapes don’t cover **Errors and empty states.** Don’t draw a separate rectangle for every error message. Use a diamond for the check and loop back to the same screen with an arrow labeled “Shows error.” Give an error its own rectangle only when it’s a genuinely different screen, such as a full-page “Account locked.” **Flows too big for one page.** Split by goal — sign-up, checkout, settings — and join them with a small circle connector carrying a letter, the same way process flowcharts do. **Wireflows.** If the team needs to see layouts, replace each rectangle with a small screen thumbnail and keep the diamonds and arrows. **Different platforms.** When iPhone and web differ, don’t merge them with notes in the margins. Draw a diamond near the entry, “Platform?”, and branch, or draw two flows. Planning the branches as a map first keeps them straight; [Mindmap AI](https://sakura5.app/mindmapai/) runs on iPhone, iPad and Mac, so the outline you sketch on your phone is waiting on your desk when you draw the final diagram. ## FAQ **What shapes are used in a user flow diagram?** The core shapes are an oval for entry and exit points, a rectangle for each screen or page, a diamond for each decision, and an arrow for each user action that moves between screens. Some teams add a rounded rectangle for on-screen actions and a cylinder or dashed box for background system steps, with a short legend explaining them. **Is a user flow the same as a flowchart?** A user flow is a type of flowchart that follows one user through a product to reach a goal. It uses the same basic shapes, but rectangles usually represent screens rather than generic process steps, and arrows are labeled with the user’s action. A general flowchart can describe any process, including ones with no user at all. **How do you show a decision in a user flow?** Use a diamond containing a short question, such as “Logged in?” or “Payment approved?”, and draw one labeled arrow for each possible answer. Include system checks as well as user choices, because those hidden branches are where developers most often need guidance and where users most often get stuck or drop out. **How many screens should one user flow show?** There’s no fixed limit, but a flow should cover a single user goal, such as signing up or completing a purchase. When a diagram grows past what fits legibly on one page, split it by goal and link the parts with lettered connector circles so each piece stays readable on its own. About the app: [MindMap AI: Mind Map Maker](https://sakura5.app/mindmapai/) · App Store: https://sakura5.app/go/mindmapai?from=/blog/user-flow-diagram-shapes/