Customer Journey Maps in Confluence with Mermaid (Copy-Paste)
The support team knows where refunds leak. The product team knows where onboarding drops. The sales team knows where the pricing page confuses. Three silos, three versions of the customer's experience — and the roadmap meeting spends an hour reconciling them instead of deciding what to fix. What is missing is a single picture with a score on every step.
Quick answer: draw customer journeys in Confluence as Mermaid journey diagrams, rendered by Mermaid Plus for Confluence. A journey diagram puts every step in a row and every satisfaction score on one curve — the dips are visible, the actors are labeled, and the whole thing stays editable text. This post gives you three copy-paste examples: onboarding, a support ticket, and a checkout flow with a summary pie.
Why a journey map lands where a flowchart can't
A flowchart says "this is how the process runs". A journey map says "this is how the customer experiences each step of that process" — and the difference shows where the emotional cost is. A journey diagram answers three questions at once:
- What happens? The steps, top to bottom
- Who touches it? The actor on each step — customer, agent, system
- How does it feel? The 0–5 satisfaction score that draws the curve
That last row is what makes journey maps uncomfortable — and useful. A 1 next to "Verification required" is a line item; two minutes in the roadmap meeting, not a debate. Score every step and the dips schedule the work.
Copy-paste 1: the onboarding journey
Start with the journey every product team claims to care about: onboarding. Three task rows keep it scannable — the score curve is the hero:
journey
%% title: New-user onboarding journey
section Sign up
Find the product: 3: Prospect
Create account: 4: Prospect
Email verification: 2: Prospect
section First value
Import data: 3: Prospect
First report runs: 5: Prospect
Admin invites team: 4: Prospect
section Solidify
Config settings: 2: Prospect
Upgrade offered: 3: Prospect
Five, four, three, two, five — the curve reads like an ECG: the dips at Email verification and Config settings are where the trial dies. This is the diagram to pin above the onboarding analysis; every drop has a product hypothesis next to it, and the fix lands in the same sprint review.
Copy-paste 2: the support ticket journey
Support journeys have the clearest pain points because the agent sees every spike. Rows for the channel and the agent make them true to the real split:
journey
%% title: Support ticket lifecycle
section Self-serve
Search help center: 3: Customer
Submit ticket: 3: Customer
section Agent
First response: 2: Customer
Diagnosis: 4: Agent
Resolution: 4: Customer
Follow-up survey: 4: Agent
The First response: 2 dip is the SLA problem wearing a costume — the customer marks the wait, not the answer. Split rows by actor (Customer vs Agent) and the async handoff points are visible: where the score line drops at the arrow between rows, that is where ownership changes hands.
Copy-paste 3: checkout flow with a summary pie
The strongest journey pages pair the journey with a pie chart. The pie answers "where does the friction live?" (total time by section); the journey answers "why does it feel bad?" (scores inside each section):
journey
%% title: Checkout flow — main path
section Cart
Review cart: 4: Customer
Enter promo code: 3: Customer
section Details
Shipping address: 2: Customer
Payment form: 3: Customer
section Confirm
Review order: 4: Customer
Place order: 5: Customer
Confirmation email: 5: Customer
pie
%% title: Where checkout time goes
"Enter promo code" : 12
"Shipping address" : 30
"Payment form" : 25
"Re-verify email" : 18
"Confirmation wait" : 15
Shipping address: 2 with 30 units of time in the pie is a checkout leak — a form that re-asks what the account already knows. The pair of charts makes the fix obvious and the metric measurable: shorten the address step and the score line and the pie both move.
The journey map that stays honest
A journey map is only as good as its refresh cycle — customer experience drifts weekly. Mermaid keeps the map honest the same way it keeps every other diagram honest: it is text. In Mermaid Plus for Confluence, the journey is a code block with a live preview: change a score after a support blitz, re-run a section after a product release, and the rendered diagram updates in the same edit. The map near the close of a sprint reflects the sprint that just happened, not the quarter from last year.
Score consistently, keep one actor naming, and refresh the dips on a cadence — the journey map becomes the one artifact that keeps product, support and sales looking at the same curve.
Where this lives beside your other Confluence diagrams
Journey maps cover the experience; the other diagram types cover the mechanics. Keep the journey on the product page (this post), the workflow underneath it as a state diagram (states & approval workflows), and the process it runs in as a flowchart (CI/CD pipeline diagrams). One space, three diagram types, and the same text-editable honesty throughout.
FAQ
What is a Mermaid journey diagram in Confluence? A timeline-style chart with task rows and a satisfaction score line — each step is a labeled bar, the score curve shows where experience dips. Mermaid Plus for Confluence renders it live from text.
How do I show who is involved in each step? Add the actor at the end of the task line ('...: 3: Customer'). Rows of the same actor make self-serve vs agent-assisted steps obvious at a glance.
What score marks a pain point? Any step scoring 1 or below is a pain point worth scheduling; a 2 with a steep drop is one conversation away. Keep the scale consistent across journeys so curves compare.
Can a journey diagram include a summary chart? Yes — pair it with a Mermaid pie chart of time per section. The pie answers 'where does friction live', the journey answers 'why it feels bad'. Example 3 shows the pair.
Render every Mermaid diagram type — journey, pie, state, flowchart, class and 24 more — in Mermaid Plus for Confluence, free for up to 10 users.
Try Mermaid Plus for Confluence
All 29 Mermaid diagram types with live preview and one-click templates — free for up to 10 users.
Get it on the Atlassian Marketplace