Mermaid User Journey Syntax

What a Mermaid user journey is for

A user journey diagram scores how a user feels at each step of a task, from 1 (frustrated) to 5 (happy), and shows who is involved. It is a quick way to show where an experience hurts.

User Journey syntax

Basic example

journey
    title Sign up for a trial
    section Discover
        Find the site: 4: User
        Read pricing: 3: User
    section Sign up
        Fill in form: 2: User
        Verify email: 1: User, Mail system
    section First use
        Create first project: 5: User

Open this example in the Mermaid editor

Common mistakes

• Scores run from 1 (worst) to 5 (best); the face on each step follows the score.

Use it in Markdown

```mermaid
journey
    title Sign up for a trial
    section Discover
        Find the site: 4: User
        Read pricing: 3: User
    section Sign up
        Fill in form: 2: User
        Verify email: 1: User, Mail system
    section First use
        Create first project: 5: User
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid pie chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: User Journey

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions