MermanDraw
Open Editor

Mermaid exampleUser Journey

User Onboarding Journey Diagram for a SaaS Product

A user onboarding journey maps the steps a new user takes from first contact to a repeat visit, with a score for how each step feels. Product managers use it to pick which step to fix next; growth teams pair it with funnel numbers to see where sentiment and drop-off line up.

  • user onboarding journey
  • customer journey map mermaid
  • activation funnel diagram
  • saas onboarding map
User Onboarding Journey Diagram for a SaaS ProductSupportUserVisitor
Discover
DiscoverVisitor
Read a blog post
Read a blog postVisitor
Open the landing page
Open the landing page
Sign up
Sign upUser
Create account
Create accountUser
Verify email
Verify email
First value
First valueUserSupport
Import existing data
Import existing dataUser
Share first result with a teammate
Share first result with a teammate
Habit
HabitUser
Return on day 3
Return on day 3User
Enable notifications
Enable notificationsFirst week with a new app
Open in editor → 14 linesrenders in GitHub, Notion, Obsidian

Mermaid code

journey
    title First week with a new app
    section Discover
      Read a blog post: 3: Visitor
      Open the landing page: 4: Visitor
    section Sign up
      Create account: 3: User
      Verify email: 2: User
    section First value
      Import existing data: 2: User, Support
      Share first result with a teammate: 5: User
    section Habit
      Return on day 3: 4: User
      Enable notifications: 3: User

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

What this diagram shows

The sections follow the classic activation funnel: Discover, Sign up, First value, Habit. The two lowest scores are Verify email and Import existing data, both at 2. The second one lists Support as an actor, which signals that users are opening tickets to get through it. Share first result with a teammate scores 5 and marks the moment the product proves its value.

How to adapt it

  • Rename the sections to match your activation metric, for example Install, Connect data source, First dashboard.
  • Pull the scores from onboarding survey responses or session recordings rather than internal opinion.
  • Add a Churn risk section covering days 7 to 14 if your retention curve drops there.
  • Keep the actor list to Visitor, User, and at most two internal roles so the legend stays readable.

FAQ

How is a user journey different from a flowchart of the signup flow?

A flowchart shows decisions and branches; a journey shows a single path over time with a feeling attached to each step. Use the journey to decide what to fix and the flowchart to specify how the fixed flow works.

What does listing "Support" as an actor tell the reader?

That the step does not complete without human help. In an onboarding map that is the clearest signal that a self-serve step is broken or missing documentation.