Mermaid User Journey Maker
Write user journey diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
User journey example
Rendering preview…
journey
title Signing up for the trial
section Discover
Read a blog post: 4: Visitor
Compare pricing: 3: Visitor
section Sign up
Create an account: 5: Visitor
Verify email: 2: Visitor
section First value
Build a diagram: 5: UserWhat is a user journey diagram?
A user journey diagram lists the steps someone takes to get something done and scores how each step feels, from 1 for painful to 5 for delightful. Steps are grouped into sections and each step names who is involved. In Mermaid you write a journey as text that starts with the journey keyword.
When to use a user journey diagram
- Mapping onboarding or checkout friction
- Sharing user research findings with a team
- Comparing the current experience with a proposed one
- Service design workshops
How to make a user journey diagram in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with journey on the first line.
- Step 2
Add sections
Add a title, then group the experience into stages with section lines such as section Sign up.
- Step 3
Score each step
Write one task per line as a description, a score from 1 to 5 and who is involved, such as Verify email: 2: Visitor.
- Step 4
Export or share
Check the live preview to see where the scores dip, then export as PNG or SVG or copy a share link.
User journey syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Start | journey | Begins a user journey |
| Title | title Signing up | Heading above the journey |
| Section | section Discover | Groups tasks into a stage |
| Task | Compare pricing: 3: Visitor | Step, score from 1 to 5, and who is involved |
| Several actors | Verify email: 2: Visitor, Support | More than one person on a step |
User journey FAQ
What does the number in a Mermaid user journey mean?
The number is a satisfaction score from 1 to 5, where 1 means the step is painful and 5 means it is easy or enjoyable. Mermaid draws the score as a face above each step, so low points in the journey stand out.
Can a step involve more than one person?
List them after the score, separated by commas, as in Create an account: 5: Visitor, Support. Everyone named appears against that step.
What is the difference between a user journey and a flowchart?
A user journey scores how each step feels and is about experience. A flowchart shows branching logic and decisions. Use a journey to find friction and a flowchart to describe a process.