Skip to main content

Mermaid 12.2 in Confluence & Jira: Mind Maps That Color Themselves by Depth

· 4 min read
NGPilot

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, Mermaid Plus Diagrams & AI Agent for Confluence, and 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​

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 easiest one to scroll past in a changelog: swimlane cluster DOM ids are now scoped per diagram (#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), lane title bands stay clear of crossing edges (#8384), and nodes with no edges keep their source order instead of being sorted by id (#8366) — so a hand-ordered incident runbook lane renders in the order you wrote it.

The rest of 12.2​

ChangeWhat you'll notice
Circle & double-circle nodes size to their label (#8409)Short labels no longer float in oversized circles; padding trimmed in the neo look
Mind map labels centered with htmlLabels: false (#8390), readable in the neo look on repainting themes (#8394)Mind map text sits where it looks like it should
ELK no longer straightens an edge terminal into a label (#8395)Fewer labels sitting on top of edges in ELK layouts
Edge clipping scoped to the engine that drew it (#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.

Sources​

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

Related guides