# Mermaid 12.2 in Confluence & Jira: Mind Maps That Color Themselves by Depth October 17, 2026 · 4 min read [NGPilot](https://ngpilot.com) Mermaid 12.2.0 shipped upstream on October 13, and it is live in all three NGPILOT diagram apps: **Enhanced Markdown for Confluence**, **Mermaid Plus Diagrams & AI Agent for Confluence**, and **Mermaid Plus Diagrams for Jira**. It's a small release with one feature you can see from across the room — mind maps that color themselves by hierarchy depth — and a set of quiet fixes that matter more on Confluence than anywhere else, because Confluence pages are where multiple diagrams share one page. **Quick answer:** Mermaid 12.2 adds `mindmap.colorBy: depth` — opt-in mind map coloring where each hierarchy level pulls from the theme palette — plus fixes for circle node sizing, mind map labels, and swimlane rendering (including the fix that stops two diagrams on one page from colliding). In [Enhanced Markdown for Confluence](https://marketplace.atlassian.com/apps/1237026/enhanced-markdown-for-confluence/), [Mermaid Plus Diagrams & AI Agent for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-ai-agent-for-confluence/), and [Mermaid Plus Diagrams for Jira](https://marketplace.atlassian.com/apps/2658777397/mermaid-plus-diagrams-for-jira/), add the config block to any mermaid fence or diagram panel. Existing diagrams render unchanged. ## The headliner: `mindmap.colorBy: depth`[​](#the-headliner-mindmapcolorby-depth "Direct link to the-headliner-mindmapcolorby-depth") Mind maps encode hierarchy, but by default every node wears the same palette role — the structure lives only in the lines. With 12.2 you opt in once: ``` --- config: mindmap: colorBy: depth --- mindmap root((Platform)) Billing Invoices Dunning Identity SSO SCIM Observability Traces Alerts ``` Every level takes its color from the theme palette the diagram already uses — root, first-level branches, and leaves become visually distinct bands with **zero per-node styling**. No `classDef` lines, no manual colors to keep in sync when the hierarchy changes; the color *is* the depth. Two details worth knowing: * **It's opt-in.** Without `colorBy: depth`, mind maps render exactly as they did in 12.0 and 12.1 — no existing diagram changes appearance. * **It reuses the theme palette.** Dark mode, custom themes, the neo look — the depth colors come from whatever theme is already active, so the map stays consistent with the rest of the page. ## The quiet fix that matters most on Confluence[​](#the-quiet-fix-that-matters-most-on-confluence "Direct link to The quiet fix that matters most on Confluence") The easiest one to scroll past in a changelog: **swimlane cluster DOM ids are now scoped per diagram** ([#8161](https://github.com/mermaid-js/mermaid/pull/8161)). Before, two diagrams on the same page could collide on an internal id — and Confluence pages are exactly where that happens: a runbook with a flowchart *and* a swimlane, a design doc with three diagrams stacked. Also in the swimlane batch: edges that detour around a lane no longer share an attachment point with their neighbor ([#8383](https://github.com/mermaid-js/mermaid/pull/8383)), lane title bands stay clear of crossing edges ([#8384](https://github.com/mermaid-js/mermaid/pull/8384)), and nodes with no edges keep their source order instead of being sorted by id ([#8366](https://github.com/mermaid-js/mermaid/pull/8366)) — so a hand-ordered incident runbook lane renders in the order you wrote it. ## The rest of 12.2[​](#the-rest-of-122 "Direct link to The rest of 12.2") | Change | What you'll notice | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Circle & double-circle nodes size to their label ([#8409](https://github.com/mermaid-js/mermaid/pull/8409)) | Short labels no longer float in oversized circles; padding trimmed in the neo look | | Mind map labels centered with `htmlLabels: false` ([#8390](https://github.com/mermaid-js/mermaid/pull/8390)), readable in the neo look on repainting themes ([#8394](https://github.com/mermaid-js/mermaid/pull/8394)) | Mind map text sits where it looks like it should | | ELK no longer straightens an edge terminal into a label ([#8395](https://github.com/mermaid-js/mermaid/pull/8395)) | Fewer labels sitting on top of edges in ELK layouts | | Edge clipping scoped to the engine that drew it ([#8270](https://github.com/mermaid-js/mermaid/pull/8270)) | Diagrams pinning their own engine (bpmn, swimlanes) render correctly even when the page default is another engine | All of it is fix-grade: syntax unchanged, behavior corrected. If a diagram looked slightly wrong in 12.1 — a label off-center, a lane band under an edge — 12.2 is the "try again" release. ## Related Resources[​](#related-resources "Direct link to Related Resources") * [Mermaid 12 in Confluence & Jira](/blog/mermaid-12-confluence-jira.md) — the 12.0 release: use case diagrams, ELK default, new look * [Mind Maps & Hierarchy Diagrams in Confluence](/blog/mermaid-mindmap-hierarchy-diagram-confluence.md) — the mind map syntax this coloring upgrades * [Swimlane Process Diagrams in Confluence](/blog/mermaid-process-flow-swimlane-diagram-confluence.md) — the diagram type that got the most fixes in 12.2 ## Sources[​](#sources "Direct link to Sources") * [mermaid@12.2.0 release notes — mermaid-js/mermaid on GitHub](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.2.0), published 2026-10-13 Try Mermaid Plus Diagrams & AI Agent for Confluence All 30 Mermaid diagram types plus a Rovo AI agent, 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-ai-agent-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)[All Posts](/blog/archive.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) * [jira](/blog/tags/jira.md) * [mermaid](/blog/tags/mermaid.md) * [mindmap](/blog/tags/mindmap.md) * [diagrams](/blog/tags/diagrams.md) * [release-notes](/blog/tags/release-notes.md)