← All diagram types

MERMAID DIAGRAM GUIDE

Mermaid user journey online editor

Describe user actions, sentiment, and experience across a journey. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the User Journey editor See an example

WHAT IT IS FOR

Make the important relationships clear

Map what a user does, feels, and experiences across a journey so teams can see friction and opportunities together.

Analyze onboarding experiences
Plan customer journeys
Prioritize improvements by user sentiment

Why use Mermaid Studio?

Write the source as versionable Mermaid code.
Preview changes immediately in the browser.
Export the finished diagram as SVG or PNG.
Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

journey
  title Diagram Sharing Journey
  section Write
    Editor Open: 5: User
    Code Write: 4: User
    Check result: 5: User
  section Sharing
    Create link: 4: User
    Send to team: 5: User

HOW TO START

Create your diagram in four steps

1Define the journey and its audience.
2Break it into meaningful stages.
3Add user actions and sentiment scores.
4Highlight the moments that need a product response.

WRITING TIPS

Keep the diagram useful

Write actions from the user's perspective.

Use scores consistently across every step.

FAQ

Frequently asked questions

What is a user journey diagram?+

It describes the steps a person takes while completing a goal, often including feelings, outcomes, and pain points.

Who can use a Mermaid user journey?+

Product, design, research, and engineering teams can use it to share a common view of an experience.

TEMPLATES

Start from a related template

Customer onboarding journey

Map customer actions and sentiment across the onboarding experience.

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Ready to make a User Journey?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio