Mermaid User Journey Cheat Sheet

A path with a score on every step.

Every picture on this page was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

A path with a score

A task is what happened, a colon, a score, a colon, and who it happened to.

journey
    title Shopping trip
    section Store
        Browse shelf: 5: Customer

A user journey with a Store section holding one step, Browse shelf, a face showing a score of 5, and Customer beside it.

The score is a face

The number after the colon is how satisfied the person was, from 1 to 5.

journey
    title Shopping trip
    section Store
        Browse shelf: 5: Customer
        Pay at till: 1: Customer

A user journey with a Store section holding two steps, Browse shelf scored 5 and Pay at till scored 1, each with a face.

More than one person

The names after the score are the actors, separated by commas.

journey
    title Shopping trip
    section Store
        Ask staff: 5: Customer, Staff

A user journey with one step, Ask staff, scored 5, with two actor dots named Customer and Staff.

Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.

Buy Mernyx Pro — $19 Download free