# Customer Journey Maps in Confluence with Mermaid (Copy-Paste) September 24, 2026 · 6 min read [NGPilot](https://ngpilot.com) 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](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-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[​](#why-a-journey-map-lands-where-a-flowchart-cant "Direct link to 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[​](#copy-paste-1-the-onboarding-journey "Direct link to 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 ``` ![New-user onboarding journey](/assets/images/new-user-onboarding-journey-ed96921f8d1c1ed1a07c0345054f28bc.svg) 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[​](#copy-paste-2-the-support-ticket-journey "Direct link to 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 ``` ![Support ticket lifecycle](/assets/images/support-ticket-lifecycle-f909d5ab12a670aa680c9f7f7b77d4fe.svg) 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[​](#copy-paste-3-checkout-flow-with-a-summary-pie "Direct link to 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 ``` ![Checkout flow — main path](/assets/images/checkout-flow-main-path-f49274599b67e610c967e21190597013.svg) ``` pie %% title: Where checkout time goes "Enter promo code" : 12 "Shipping address" : 30 "Payment form" : 25 "Re-verify email" : 18 "Confirmation wait" : 15 ``` ![Where checkout time goes](data:image/svg+xml;base64,PHN2ZyBpZD0ibXktc3ZnIiB3aWR0aD0iMTAwJSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDY0OS45MTE2MjEwOTM3NSA0NTAiIHN0eWxlPSJtYXgtd2lkdGg6IDY0OS45MTJweDsgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7IiByb2xlPSJncmFwaGljcy1kb2N1bWVudCBkb2N1bWVudCIgYXJpYS1yb2xlZGVzY3JpcHRpb249InBpZSI+PHN0eWxlPiNteS1zdmd7Zm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO2ZvbnQtc2l6ZToxNnB4O2ZpbGw6IzMzMzt9QGtleWZyYW1lcyBlZGdlLWFuaW1hdGlvbi1mcmFtZXtmcm9te3N0cm9rZS1kYXNob2Zmc2V0OjA7fX1Aa2V5ZnJhbWVzIGRhc2h7dG97c3Ryb2tlLWRhc2hvZmZzZXQ6MDt9fSNteS1zdmcgLmVkZ2UtYW5pbWF0aW9uLXNsb3d7c3Ryb2tlLWRhc2hhcnJheTo5LDUhaW1wb3J0YW50O3N0cm9rZS1kYXNob2Zmc2V0OjkwMDthbmltYXRpb246ZGFzaCA1MHMgbGluZWFyIGluZmluaXRlO3N0cm9rZS1saW5lY2FwOnJvdW5kO30jbXktc3ZnIC5lZGdlLWFuaW1hdGlvbi1mYXN0e3N0cm9rZS1kYXNoYXJyYXk6OSw1IWltcG9ydGFudDtzdHJva2UtZGFzaG9mZnNldDo5MDA7YW5pbWF0aW9uOmRhc2ggMjBzIGxpbmVhciBpbmZpbml0ZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9I215LXN2ZyAuZXJyb3ItaWNvbntmaWxsOiM1NTIyMjI7fSNteS1zdmcgLmVycm9yLXRleHR7ZmlsbDojNTUyMjIyO3N0cm9rZTojNTUyMjIyO30jbXktc3ZnIC5lZGdlLXRoaWNrbmVzcy1ub3JtYWx7c3Ryb2tlLXdpZHRoOjFweDt9I215LXN2ZyAuZWRnZS10aGlja25lc3MtdGhpY2t7c3Ryb2tlLXdpZHRoOjMuNXB4O30jbXktc3ZnIC5lZGdlLXBhdHRlcm4tc29saWR7c3Ryb2tlLWRhc2hhcnJheTowO30jbXktc3ZnIC5lZGdlLXRoaWNrbmVzcy1pbnZpc2libGV7c3Ryb2tlLXdpZHRoOjA7ZmlsbDpub25lO30jbXktc3ZnIC5lZGdlLXBhdHRlcm4tZGFzaGVke3N0cm9rZS1kYXNoYXJyYXk6Mzt9I215LXN2ZyAuZWRnZS1wYXR0ZXJuLWRvdHRlZHtzdHJva2UtZGFzaGFycmF5OjI7fSNteS1zdmcgLm1hcmtlcntmaWxsOiMzMzMzMzM7c3Ryb2tlOiMzMzMzMzM7fSNteS1zdmcgLm1hcmtlci5jcm9zc3tzdHJva2U6IzMzMzMzMzt9I215LXN2ZyBzdmd7Zm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO2ZvbnQtc2l6ZToxNnB4O30jbXktc3ZnIHB7bWFyZ2luOjA7fSNteS1zdmcgLnBpZUNpcmNsZXtzdHJva2U6YmxhY2s7c3Ryb2tlLXdpZHRoOjJweDtvcGFjaXR5OjAuNzt9I215LXN2ZyAucGllQ2lyY2xlLmhpZ2hsaWdodGVke3NjYWxlOjEuMDU7b3BhY2l0eToxO30jbXktc3ZnIC5waWVDaXJjbGUuaGlnaGxpZ2h0ZWRPbkhvdmVyOmhvdmVye3RyYW5zaXRpb24tZHVyYXRpb246MjUwbXM7c2NhbGU6MS4wNTtvcGFjaXR5OjE7fSNteS1zdmcgLnBpZU91dGVyQ2lyY2xle3N0cm9rZTpibGFjaztzdHJva2Utd2lkdGg6MnB4O2ZpbGw6bm9uZTt9I215LXN2ZyAucGllVGl0bGVUZXh0e3RleHQtYW5jaG9yOm1pZGRsZTtmb250LXNpemU6MjVweDtmaWxsOmJsYWNrO2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjt9I215LXN2ZyAuc2xpY2V7Zm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO2ZpbGw6IzMzMztmb250LXNpemU6MTdweDt9I215LXN2ZyAubGVnZW5kIHRleHR7ZmlsbDpibGFjaztmb250LWZhbWlseToidHJlYnVjaGV0IG1zIix2ZXJkYW5hLGFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjE3cHg7fSNteS1zdmcgLm5vZGUgLm5lby1ub2Rle3N0cm9rZTojOTM3MERCO30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgcmVjdCwjbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLmNsdXN0ZXIgcmVjdCwjbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgcG9seWdvbntzdHJva2U6IzkzNzBEQjtmaWx0ZXI6ZHJvcC1zaGFkb3coMXB4IDJweCAycHggcmdiYSgxODUsIDE4NSwgMTg1LCAxKSk7fSNteS1zdmcgW2RhdGEtbG9vaz0ibmVvIl0uc3dpbWxhbmUuY2x1c3RlciByZWN0e2ZpbHRlcjpub25lO30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgcGF0aHtzdHJva2U6IzkzNzBEQjtzdHJva2Utd2lkdGg6MXB4O30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgLm91dGVyLXBhdGh7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgLm5lby1saW5lIHBhdGh7c3Ryb2tlOiM5MzcwREI7ZmlsdGVyOm5vbmU7fSNteS1zdmcgW2RhdGEtbG9vaz0ibmVvIl0ubm9kZSBjaXJjbGV7c3Ryb2tlOiM5MzcwREI7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgY2lyY2xlIC5zdGF0ZS1zdGFydHtmaWxsOiMwMDAwMDA7fSNteS1zdmcgW2RhdGEtbG9vaz0ibmVvIl0uaWNvbi1zaGFwZSAuaWNvbntmaWxsOiM5MzcwREI7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbXktc3ZnIFtkYXRhLWxvb2s9Im5lbyJdLmljb24tc2hhcGUgLmljb24tbmVvIHBhdGh7c3Ryb2tlOiM5MzcwREI7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbXktc3ZnIDpyb290ey0tbWVybWFpZC1mb250LWZhbWlseToidHJlYnVjaGV0IG1zIix2ZXJkYW5hLGFyaWFsLHNhbnMtc2VyaWY7fTwvc3R5bGU+PGcvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNSwyMjUpIj48Zz48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMTg2IiBjbGFzcz0icGllT3V0ZXJDaXJjbGUiLz48cGF0aCBkPSJNMCwtMTg1QTE4NSwxODUsMCwwLDEsMTI2LjY0MSwtMTM0Ljg1OUwwLDBaIiBmaWxsPSIjRUNFQ0ZGIiBjbGFzcz0icGllQ2lyY2xlIi8+PHBhdGggZD0iTTEyNi42NDEsLTEzNC44NTlBMTg1LDE4NSwwLDAsMSw4OS4xMjQsMTYyLjExN0wwLDBaIiBmaWxsPSIjZmZmZmRlIiBjbGFzcz0icGllQ2lyY2xlIi8+PHBhdGggZD0iTTg5LjEyNCwxNjIuMTE3QTE4NSwxODUsMCwwLDEsLTE2Mi4xMTcsODkuMTI0TDAsMFoiIGZpbGw9ImhzbCg4MCwgMTAwJSwgNTYuMjc0NTA5ODAzOSUpIiBjbGFzcz0icGllQ2lyY2xlIi8+PHBhdGggZD0iTS0xNjIuMTE3LDg5LjEyNEExODUsMTg1LDAsMCwxLC0xNDkuNjY4LC0xMDguNzRMMCwwWiIgZmlsbD0iaHNsKDI0MCwgMTAwJSwgODYuMjc0NTA5ODAzOSUpIiBjbGFzcz0icGllQ2lyY2xlIi8+PHBhdGggZD0iTS0xNDkuNjY4LC0xMDguNzRBMTg1LDE4NSwwLDAsMSwwLC0xODVMMCwwWiIgZmlsbD0iaHNsKDYwLCAxMDAlLCA2My41Mjk0MTE3NjQ3JSkiIGNsYXNzPSJwaWVDaXJjbGUiLz48dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wNzcyODE2ODQ5OTkwODYsLTEyOS4wMDY0ODc0MTY5OTQ4NykiIGNsYXNzPSJzbGljZSIgc3R5bGU9InRleHQtYW5jaG9yOiBtaWRkbGU7Ij4xMiU8L3RleHQ+PHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM3LjY1NTkxNDgwNzM4MzgsMTcuMzg5OTg2MTU3MDQ3MjQpIiBjbGFzcz0ic2xpY2UiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyI+MzAlPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOC43MTAwMTU5NjI5NDMwNywxMzMuMjQwNzQ4ODg3Njc1ODYpIiBjbGFzcz0ic2xpY2UiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyI+MjUlPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMzguNDc2MjA4NTY5NDIyNjgsLTguNzEyMTg0NTg0NjkyMTY2KSIgY2xhc3M9InNsaWNlIiBzdHlsZT0idGV4dC1hbmNob3I6IG1pZGRsZTsiPjE4JTwvdGV4dD48dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjIuOTkxMTgxODM4ODYyMTMsLTEyMy42MjcxNTUyMzExMzYwMykiIGNsYXNzPSJzbGljZSIgc3R5bGU9InRleHQtYW5jaG9yOiBtaWRkbGU7Ij4xNSU8L3RleHQ+PC9nPjx0ZXh0IHg9IjAiIHk9Ii0yMDAiIGNsYXNzPSJwaWVUaXRsZVRleHQiLz48ZyBjbGFzcz0ibGVnZW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsLTU1KSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBzdHlsZT0iZmlsbDogcmdiKDIzNiwgMjM2LCAyNTUpOyBzdHJva2U6IHJnYigyMzYsIDIzNiwgMjU1KTsiLz48dGV4dCB4PSIyMiIgeT0iMTQiPkVudGVyIHByb21vIGNvZGU8L3RleHQ+PC9nPjxnIGNsYXNzPSJsZWdlbmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNiwtMzMpIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDIyMik7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyMjIpOyIvPjx0ZXh0IHg9IjIyIiB5PSIxNCI+U2hpcHBpbmcgYWRkcmVzczwvdGV4dD48L2c+PGcgY2xhc3M9ImxlZ2VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE2LC0xMSkiPjxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgc3R5bGU9ImZpbGw6IHJnYigxODEsIDI1NSwgMzIpOyBzdHJva2U6IHJnYigxODEsIDI1NSwgMzIpOyIvPjx0ZXh0IHg9IjIyIiB5PSIxNCI+UGF5bWVudCBmb3JtPC90ZXh0PjwvZz48ZyBjbGFzcz0ibGVnZW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsMTEpIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHN0eWxlPSJmaWxsOiByZ2IoMTg1LCAxODUsIDI1NSk7IHN0cm9rZTogcmdiKDE4NSwgMTg1LCAyNTUpOyIvPjx0ZXh0IHg9IjIyIiB5PSIxNCI+UmUtdmVyaWZ5IGVtYWlsPC90ZXh0PjwvZz48ZyBjbGFzcz0ibGVnZW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsMzMpIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDY5KTsgc3Ryb2tlOiByZ2IoMjU1LCAyNTUsIDY5KTsiLz48dGV4dCB4PSIyMiIgeT0iMTQiPkNvbmZpcm1hdGlvbiB3YWl0PC90ZXh0PjwvZz48L2c+PC9zdmc+) `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[​](#the-journey-map-that-stays-honest "Direct link to 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](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-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[​](#where-this-lives-beside-your-other-confluence-diagrams "Direct link to 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](/blog/mermaid-state-diagram-workflow-confluence.md)), and the process it runs in as a flowchart ([CI/CD pipeline diagrams](/blog/mermaid-ci-cd-pipeline-diagram-confluence.md)). One space, three diagram types, and the same text-editable honesty throughout. ## FAQ[​](#faq "Direct link to 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](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-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](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-for-confluence?utm_source=ngpilot.com\&utm_medium=website\&utm_campaign=mermaid-plus-for-confluence) ## Related guides * [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md) * [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md) * [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md) * [How to Migrate Confluence Content](/blog/how-to-migrate-confluence-content.md) * [How to Add a Block Quote in Confluence](/blog/block-quote-confluence.md) Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links) **Tags:** * [confluence](/blog/tags/confluence.md) * [mermaid](/blog/tags/mermaid.md) * [journey](/blog/tags/journey.md) * [customer-experience](/blog/tags/customer-experience.md) * [product](/blog/tags/product.md) * [how-to](/blog/tags/how-to.md)