MermanDraw
Open Editor

Mermaid exampleState Diagram

Mobile App Screen Navigation Flow State Diagram

A screen flow diagram shows which screens an app has and which taps move between them. Designers use it before wireframes to agree on navigation depth; mobile engineers map it to the navigation stack or router configuration.

  • app screen flow diagram
  • mobile navigation state diagram
  • screen flow mermaid
  • ux flow state machine
Mobile App Screen Navigation Flow State Diagram

first launch

returning user

finish slides

success

tap search

tap result

tap item

back

tap buy

back

payment ok

done

Splash

Onboarding

Home

SignIn

Search

Detail

Checkout

Confirmation

Open in editor → 14 linesrenders in GitHub, Notion, Obsidian

Mermaid code

stateDiagram-v2
    [*] --> Splash
    Splash --> Onboarding : first launch
    Splash --> Home : returning user
    Onboarding --> SignIn : finish slides
    SignIn --> Home : success
    Home --> Search : tap search
    Search --> Detail : tap result
    Home --> Detail : tap item
    Detail --> Home : back
    Detail --> Checkout : tap buy
    Checkout --> Detail : back
    Checkout --> Confirmation : payment ok
    Confirmation --> Home : done

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: State Diagram guide.

What this diagram shows

Each screen is a state and each transition label is the user action that triggers it. Splash branches on first launch versus returning user, which is the decision most apps bury in code. The back edges from Detail and Checkout are written explicitly so reviewers can see where a back gesture lands; a missing back edge usually means a dead end.

A state diagram works better than a flowchart here because screens are places the user can sit in, not steps that complete. The arrows read as navigation rather than as process.

How to adapt it

  • Add a Settings state reachable from Home and returning to it, then check that every new state has at least one way back.
  • Use a composite state called Authenticated around everything after SignIn to show which screens require a session.
  • Add Home --> Home : pull to refresh as a self-transition if refresh behavior matters to the spec.
  • Mark deep-link entry points with extra [*] --> Detail : push notification edges.

FAQ

How do I show tabs that are all reachable from each other?

Put the tab screens inside one composite state and draw the tab bar as transitions between them. If every tab links to every other, add a note saying so rather than drawing all the edges.

Should modals and bottom sheets be separate states?

Only when they change what the back action does. A confirmation sheet that returns to the same screen can be a note on that state; a full-screen modal with its own navigation deserves its own state.