🚶 Mermaid

User journey

Bekijk je product door de ogen van je gebruikers

Open dit voorbeeld in de editor Genereer er een met AI

Wat is een User journey?

Een user journey brengt de stappen in kaart die een gebruiker zet om een doel te bereiken, met per stap een tevredenheidsscore. Hij legt direct de frictiepunten bloot in onboarding, afrekenen of support.

User journeys zijn gemaakt voor de muur van een workshopruimte, niet voor een architectuurdocument: product, support en design lezen hetzelfde plaatje en discussiëren over dezelfde lage score. Hun waarde is emotioneel, niet technisch — een stap die perfect werkt kan alsnog een twee scoren. Hun grens is dat het diagram één lineair pad bevat met één getal per stap. Uitvalpercentages en kanalen horen elders.

Live voorbeeld

Mermaid-code

journey
    title Checkout experience
    section Browse
      Find product: 5: Customer
      Compare options: 3: Customer
    section Purchase
      Add to cart: 4: Customer
      Enter payment: 2: Customer
      Confirm order: 5: Customer

Live voorbeeld

Wanneer gebruik je het

Onboarding- en afrekenervaringen in kaart brengen

Frictiepunten identificeren met tevredenheidsscores

Product- en supportteams uitlijnen op het echte gebruikerspad

Veelgemaakte fouten

Een stap zonder actor

Find product: 5 rendert de stap wel, maar hangt hem aan niemand, waardoor hij uit de actorlegenda verdwijnt en de rij gezichtjes onvolledig oogt. Elke stap heeft na de score minstens één actor nodig.

Actornamen moeten exact overeenkomen

Customer en customer zijn twee verschillende actoren, elk met een eigen kleur en legenda-item. Het diagram rendert gewoon, dus het duplicaat is makkelijk te missen — kopieer de naam in plaats van hem op elke regel opnieuw te typen.

Persona’s zijn geen stapactoren

Customer, Support op één stap zetten mag — het benoemt wie daar betrokken is. Wat wél misgaat, is twee persona’s door dezelfde journey halen: de ene scorelijn middelt dan twee verschillende ervaringen weg. Teken één journey per persona.

Basissyntaxis

.mmd

journey
    title My journey
    section Phase
      Step name: 5: Actor

journey title Checkout experience
De titel benoemt het doel dat de gebruiker wil bereiken. Eén journey hoort één doel voor één persona te dekken; een tweede persona betekent een tweede diagram.
section Purchase
Secties splitsen de journey in fasen — oriënteren, beslissen, betalen, ontvangen — en worden getekend als een band boven de stappen die ze bevatten, wat ook de scorelijn visueel groepeert.
Enter payment: 2: Customer
Een stap is tekst, dan een score van 0 tot 5, dan de actoren, allemaal gescheiden door dubbele punten. De score bepaalt het gezichtje en de hoogte van het punt.
%%{init: {"theme": "forest"}}%%
Een init-directive op de eerste regel wisselt van thema, en dat is de enige opmaakknop die een journey biedt — er is geen kleur per stap of per sectie.

Vragen over dit diagram

Wat betekenen de scores?

Elke stap krijgt een tevredenheidsscore van 0 tot 5, weergegeven als gezichtje. Lage scores tonen precies waar gebruikers vastlopen — je verbeterbacklog, gevisualiseerd.

Kunnen meerdere actoren in één journey voorkomen?

Ja — noem meerdere actoren na de score (bijv. “Afrekenen: 3: Klant, Support”) om te laten zien wie bij elke stap betrokken is.

Hoe exporteer ik een user journey voor een workshoppresentatie?

Exporteer PNG op 2× of 4× zodat de gezichtjes leesbaar blijven bij projectie, of SVG voor een geprinte poster. De broncode blijft tekst, dus het diagram is tussen twee sessies in een paar minuten bijgewerkt.

Kan een Mermaid-journey uitvalpercentages of kanalen tonen?

Nee. Het enige kwantitatieve element is de score van 0 tot 5; er zijn geen kolommen voor metrics, kanalen of contactmomenten. Houd die in een tabel naast het diagram en laat de journey de emotionele vorm van het pad dragen.

Hoe toon ik een gebruiker die halverwege afhaakt?

Vertakken kan niet binnen een journey — het is één lineair pad. Modelleer het afhaken als een stap met een lage score, en teken de alternatieve routes ernaast in een flowchart als de vertakking zelf het onderwerp is.

Wat is het verschil met een volledige customer journey map?

Een Mermaid-journey houdt drie dingen vast: stappen, actoren en tevredenheid. Een klassieke journey map draagt daarnaast kanalen, pijnpunten, kansen en letterlijke citaten. Gebruik het diagram als ruggengraat en zet de rest in het omringende document.

User journey of een ander diagramtype?

User journey of flowchart?

Een flowchart toont wat het systeem toestaat: elke vertakking, elk foutpad. Een user journey toont wat één persoon werkelijk deed en hoe dat voelde. Discussiëren of een randgeval is afgevangen is een flowchartvraag; bepalen wat je eerst oplost is een journeyvraag.

User journey of tijdlijn?

Een journey is geordend op stappen, een tijdlijn op datums. De journey herhaalt zich voor elke gebruiker en draagt een score; de tijdlijn gebeurde één keer en velt geen oordeel. Onboarding is een journey; de geschiedenis van je onboardingredesign is een tijdlijn.

Verken de andere diagramtypen

🔀 Flowchart 💬 Sequentiediagram 🧩 Klassediagram 🗄️ Entiteit-relatiediagram 🔄 Toestandsdiagram 📅 Gantt-grafiek 🥧 Cirkeldiagram 🧠 Mindmap 🌿 Git-graaf 🕰️ Tijdlijn 🎯 Kwadrantgrafiek

Maak nu je User journey

Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.

Mermaid Studio openen