Skip to main content

Mermaid Charts for Confluence Dashboards: Pie & XY in One Post

· 6 min read
NGPilot

The quarterly review loads a 14-tab spreadsheet to answer one question — "where do we actually spend our engineering time?" — because the wiki charts are stale screenshots from last quarter and the numbers table nobody reads. A dashboard is not a spreadsheet: it is the two charts that answer the two questions people keep asking.

Quick answer: build dashboard charts in Confluence with Mermaid pie and xychart-beta charts, rendered by Mermaid Plus for Confluence. Pie for shares, XY for trends — both as editable text that refreshes like code. This post gives you three copy-paste examples: an effort-share pie, a weekly trend XY, and a dual-series release dashboard.

The two questions a dashboard answers​

Every dashboard reduces to two questions, and each has a chart that answers it cleanly:

  • What is the mix? → a pie chart with a handful of categories
  • How does it change? → an xychart-beta chart, bars or lines, across time

Pick the chart by the question, not by prettiness — a pie stuffed with twelve categories is unreadable, and a trend with a single static snapshot is misleading. Both Mermaid types stay text, so both refresh in the same edit as the report.

Copy-paste 1: the share-of-effort pie​

Start with the mix question. Six categories is the sweet spot; the pie answers "what is our effort really made of" in one glance:

pie
  %% title: Engineering effort split
  "New features" : 40
  "Bug fixes" : 25
  "Tech debt" : 18
  "Support" : 10
  "Tooling" : 7

Engineering effort split

One quote, one number per line, total sums to 100. The slice hiding behind the reset (Tech debt: 18) is exactly the conversation this chart is designed to start — "we planned zero, we spent eighteen". Two executives read the same chart and agree on the fact; the debate moves to what to do about it.

Copy-paste 2: the weekly trend XY​

Trends need an axis, which is what xychart-beta adds. Incident counts by week — the chart to pin in the reliability space:

xychart-beta
  %% title: Incidents per week
  title "Incidents per week"
  x-axis [2026-W36, 2026-W37, 2026-W38, 2026-W39]
  y-axis "Incidents" 0 --> 12
  bar [3, 5, 2, 9]
  line [3, 5, 2, 9]

Incidents per week

The same data as bars and a line overlaid: bars for the raw count, line for the trend your eye needs. The W39: 9 spike is the arrow on this chart — the week a deploy went sideways. Because the chart is text, the next review reads the numbers, not a screenshot of them.

Copy-paste 3: the dual-series release dashboard​

Dashboards get nuanced: two numbers that must be read together. xychart-beta supports multiple series on one chart — bars for one metric, a line for the other, on a shared axis:

xychart-beta
  %% title: Bugs caught in staging vs leaked to production
  title "Bugs caught in staging vs leaked to production"
  x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5]
  y-axis "Bugs" 0 --> 16
  bar [12, 13, 11, 15, 14]
  line [4, 3, 3, 2, 2]

Bugs caught in staging vs leaked to production

Bars for bugs caught in staging, line for the leaks that still reach production: the trend story — "the pipeline catches more nearly every sprint" — reads without a table. Same units, one axis, honest comparison; the shrinking gap between the two lines is the metric the release review cares about. This is the chart to keep beside the releases page each sprint.

Charts that behave like the report​

The durability trick is the same across every Mermaid type here: the chart is text, so it updates in the same gesture as the numbers it reports. In Mermaid Plus for Confluence, edit a value in the live preview and the SVG redraws — press Enter, and the wiki chart matches the spreadsheet, no export step. When the quarterly review asks for the current numbers, the current numbers are already on the page, because the page's chart is the numbers.

Screenshots rot on a schedule; text charts rot never, because every update is a diff. Keep the pie for the mix, the XY for the trend, and the dashboard will answer the two questions people actually ask.

Where this lives beside your other Confluence diagrams​

Charts cover the numbers; diagrams cover the structures. Keep the pie and XY on the dashboard page (this post), the process that produces the numbers as a state diagram (states & approval workflows), and the pipeline behind the release metrics as a flowchart (CI/CD pipeline diagrams). One space, three diagram types, and the numbers always fresh.

FAQ​

Does Mermaid support pie charts and bar charts in Confluence? Yes — Mermaid pie and xychart-beta (bars/lines) both render text to SVG. Mermaid Plus for Confluence renders them live as you type.

When should I use a pie vs. an XY chart? Pie for a share with few categories (under 6 reads best); XY for a trend or comparison across a category axis. Pick by the question the chart must answer.

How do I label slices or hide the pie legend? Labels come from the quoted data lines; add pie showData to print percentages on the slices. The legend always shows category names (each slice has none unless you add showData).

Can I put multiple series on an XY chart? Yes — xychart-beta supports multiple data series with a legend on a shared axis. Keep the series on the same unit so the comparison is honest (bars for one metric, line for another, same scale); example 3 shows a caught-vs-leaked pairing.

Render every Mermaid diagram type — pie, XY, 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

Related guides