Mermaid User Journey

mermaidCopy

journey
    title Signing up for a SaaS tool
    section Discover
      Find site via search: 4: Visitor
      Read pricing page: 3: Visitor
    section Sign up
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First use
      Complete onboarding: 4: User
      Create first diagram: 5: User
      Invite teammate: 3: User, Teammate

Open in the live editor

User journey diagrams show the steps a person takes to achieve a goal and how they feel at each step. Every task gets a score from 1 to 5 and a list of actors, so pain points stand out immediately.

Product managers and UX designers use them to align teams on where the experience breaks down and which improvements matter most.

When to use a user journey

• Customer journey and onboarding analysis
• UX research synthesis
• Service blueprints
• Prioritising product improvements

User Journey syntax reference

User Journey examples

mermaidCopy

journey
    title Weekly grocery order
    section Shop
      Browse offers: 4: Customer
      Add items: 4: Customer
    section Checkout
      Choose delivery slot: 2: Customer
      Pay: 4: Customer
    section Delivery
      Wait for driver: 2: Customer, Driver
      Receive groceries: 5: Customer

Open in the live editor

Tips and best practices

• Use real research data for scores where possible; it keeps discussions grounded.
• Name sections after the user's goals, not your internal systems.
• List multiple actors when a step depends on someone else (support, driver, teammate).

Generate a user journey with AI

Not sure where to start? Describe what you need and the AI user journey generator writes the Mermaid code for you. Try prompts like:

• “Patient booking a doctor's appointment online”
• “First-time user setting up a smart home device”
• “Traveller checking in for a flight”

User Journey templates