learn-mermaid-with-phoebe / Deep dive 6.1 of 3
Learn Mermaid with Phoebe · Deep dive 6.1 of 3

Numbers in pink: mermaid's chart types

Five chart types that live where your words live: pie, quadrant, xy, sankey, and radar - each with a Nova example, an honest when-to-use, and the gotchas the docs whisper.

🟠 Self-paced Data & AI teams ~30 min
Pie + quadrant xy + sankey Radar Quiz + cheat sheet
Part 0

Why this deep dive exists

Honest framing first: mermaid's charts are QUICK-LOOK charts for documents, not a BI tool. No drill-downs, no live data, limited styling. But that is exactly their power - when a design doc needs one bar chart, opening a BI tool is overkill and pasting a screenshot starts the staleness clock. A ten-line chart that lives IN the doc, diffs in PRs, and re-renders forever wins. One caveat throughout: several of these types are beta - the keyword carries a -beta suffix or recently dropped it, and syntax may move between versions. When a chart misbehaves, check the current docs first.

Core - read every section ★ Try it now Every chart on this page is REAL mermaid, rendered live
★ What you walk out with Five chart grammars applied to Nova's numbers: spend shares (pie), a data quality priority grid (quadrant), pipeline volume trends (xy), event flow volumes (sankey), and team skill coverage (radar) - plus a decision strip for picking the right one in two seconds.
The map

Which chart when

Each type answers exactly one question shape. Match the question, not the aesthetics.

"Shares of one whole?" pie Nova warehouse spend split "Prioritize on two axes?" quadrant quality fixes: effort vs impact "Trend over categories?" xychart pipeline volume by month "Where do the volumes flow?" sankey events through the quality gate "Coverage across dimensions?" radar team skill coverage None of these replace a BI tool - they live next to the words, answering one question each.
🔍 Click to zoom - five question shapes, five chart types. Match the question first.
Chart 1 of 5 · stable

Pie - shares of one whole 4 min

The oldest and most stable chart in mermaid. One pie keyword, optional showData to print values, optional title, then quoted labels with values. Slices draw clockwise in source order.

CoreNova's warehouse spend, in six lines2 min▶

Use it in data work for: cost splits, storage by domain, ticket categories - any "what makes up the total" moment in a budget doc or postmortem. Above five or six slices, switch to a table; pies stop communicating.

Six lines become a sized-to-scale donut SOURCE RENDERS AS pie showData title Nova warehouse spend "Compute" : 55 "Storage" : 30 "Egress" : 15 Compute 55 Storage 30 Egress 15 Slices draw clockwise in source order - list largest first for the classic look.
🔍 Click to zoom - six lines of code become a real spend breakdown
pie showData title Nova warehouse spend
  "Compute" : 55
  "Storage" : 30
  "Egress" : 15
  • Gotcha: values must be positive. Zero or negative values throw a parse error - filter them out before charting.
  • Gotcha: labels need quotes, always - unquoted labels are the number-one pie syntax error.
  • Order is yours: mermaid does not sort - list slices largest-first for the classic look.
Chart 2 of 5 · stable

Quadrant - prioritize on two axes 5 min

The consultant's favorite, as code: quadrantChart takes axis labels (left --> right, bottom --> top), four quadrant names, and points at [x, y] coordinates from 0 to 1.

CoreNova's data quality backlog, prioritized3 min▶

Use it in data work for: prioritizing quality fixes, tool evaluations, model backlog triage - any effort-vs-impact conversation where a picture ends the debate faster than a spreadsheet.

quadrantChart
  title Nova data quality fixes
  x-axis Low effort --> High effort
  y-axis Low impact --> High impact
  quadrant-1 Plan properly
  quadrant-2 Do first
  quadrant-3 Quietly drop
  quadrant-4 Nice to have
  Null user ids: [0.2, 0.85]
  Late CRM loads: [0.45, 0.7]
  Duplicate events: [0.3, 0.5]
  Schema drift alerts: [0.8, 0.75]
  Emoji in names: [0.15, 0.1]
  • Gotcha: quadrant numbering is fixed - quadrant-1 is top RIGHT, then counterclockwise. Mislabeling these flips your story.
  • Gotcha: coordinates are 0 to 1, not percentages or raw values - normalize before plotting.
  • Crowding: past ~8 points labels collide; shortlist before you chart.
Chart 3 of 5 · beta lineage

XY chart - trend over categories 5 min

Bars, lines, or both on one classic two-axis plot. Born as xychart-beta; current docs have graduated it to plain xychart, and v11 accepts both spellings. We use the beta form here because it renders on every v11, old or new.

CoreNova pipeline volume by month3 min▶

Use it in data work for: volume trends, cost curves, row counts per load - the workhorse chart of every capacity review. Bar and line stack in one chart: bars for actuals, line for the target.

xychart-beta
  title "Nova pipeline volume by month"
  x-axis [Jan, Feb, Mar, Apr, May, Jun]
  y-axis "Events (millions)" 0 --> 40
  bar [12, 15, 19, 24, 30, 36]
  line [14, 18, 22, 26, 31, 38]
  • Gotcha: series are positional. Values map to x-axis categories by ORDER - the fourth number is April, no keys, no gaps allowed.
  • Gotcha: quote multi-word strings - the title and any category with a space need double quotes.
  • No legend labels for series out of the box - say what bar and line mean in the caption or surrounding text.
Chart 4 of 5 · beta lineage

Sankey - where the volumes flow 5 min

The most data-native syntax in mermaid: after the keyword, the body is literally CSV - source,target,value per line. Born as sankey-beta, graduated to sankey in current docs; v11 accepts both, and we use the beta form for maximum compatibility.

CoreNova's event flow through the quality gate3 min▶

Use it in data work for: pipeline volume accounting - where records enter, split, and land. A sankey makes data LOSS visible: that thin quarantine ribbon below is the chart equivalent of a failing quality check, and it often comes straight out of a GROUP BY.

CSV rows become a flow, to scale SOURCE RENDERS AS sankey-beta App events,Quality gate,60 CRM export,Quality gate,25 Quality gate,Warehouse,78 Quality gate,Quarantine,7 Quality gate App events 60 CRM export 25 Warehouse 78 Quarantine 7 60 + 25 in equals 78 + 7 out - mermaid will not check that balance for you.
🔍 Click to zoom - a thin ribbon makes data loss impossible to miss
sankey-beta
App events,Quality gate,60
CRM export,Quality gate,25
Quality gate,Warehouse,78
Quality gate,Quarantine,7
Warehouse,Dashboards,48
Warehouse,ML features,30
  • Gotcha: it is real CSV. No pipes, no arrows - and a comma INSIDE a node name needs the whole name wrapped in double quotes.
  • Gotcha: conservation is on you. Mermaid will happily draw inflows that do not match outflows - reviewers will notice. Make the sums balance (60 + 25 = 78 + 7).
  • Node names ARE identity: the exact same string links flows together - "Warehouse" and "warehouse" become two nodes.
Chart 5 of 5 · beta, v11.6+

Radar - coverage across dimensions 4 min

The newest of the five (v11.6.0, keyword radar-beta): named axes, one polygon per curve, optional max and min for the scale. Newer means the syntax is most likely of all five to move - check the docs page when upgrading.

CoreNova team skill coverage2 min▶

Use it in data work for: skill matrices, tool capability comparisons, maturity assessments - anything scored on the same scale across 4-6 dimensions. Two curves make gaps visible instantly.

radar-beta
  axis sql["SQL"], py["Python"], viz["Visualization"]
  axis ml["ML"], gov["Governance"]
  curve now["Team today"]{4, 3, 4, 2, 2}
  curve goal["Hiring target"]{5, 4, 4, 4, 3}
  max 5
  min 0
  • Gotcha: curve values are positional - they map to axes in declaration order. Use the named form curve c{sql: 4, ml: 2} when order gets fragile.
  • Gotcha: set max explicitly. Without it the scale is derived from the data, and two radars side by side silently use different scales.
  • Keep it to 3-4 curves - beyond that the polygons overlap into noise.
Real world

A data lead replaced the "skills spreadsheet nobody opened" with one radar-beta block in the team's quarterly planning doc. Because the chart was text, updating a score was a one-character PR - and the ML gap it exposed became the quarter's hiring case, approved with the chart itself as slide one.

Homework

Try it yourself - this week ◐ 20-30 min total

Source material

Official docs covered

This deep dive teaches the working content of these syntax pages at mermaid.js.org (mermaid 11.x). Config-level styling for each chart lives with Session 6's theming toolkit.

✓Pie chartstable - showData, title, positive values only
✓Quadrant chartstable - axes, quadrant labels, 0-1 points
✓XY chartbeta lineage - xychart-beta / xychart, bar + line series
✓Sankeybeta lineage - sankey-beta / sankey, CSV body, experimental per docs
✓Radarbeta - radar-beta, v11.6+, axes + curves + max/min
Check yourself

Three questions before you go 🎯 ◐ 90 seconds

1 · Your quadrant point sits in the wrong corner. The most likely cause?

Two traps in one chart: normalize values into the 0-1 range, and remember the fixed numbering - quadrant-1 top right, counterclockwise from there.

2 · What is the body of a sankey diagram, after the keyword line?

Sankey is the most data-native grammar in mermaid - plain CSV, which means you can often generate it straight from a GROUP BY.

3 · In an xychart, how do bar values map to x-axis categories?

Series are positional arrays. Skipping a month silently shifts every later value one category left - the classic xychart bug.

Deep dive 6.1 cheat sheet · pin this

piepie showData title Text · "Label" : 55 · positive values only, quotes required, slices draw in source order.
quadrantChartx-axis Low --> High · quadrant-1..4 (top right, counterclockwise) · Point: [0.2, 0.85] with 0-1 coordinates.
xychart-betax-axis [Jan, Feb] · y-axis "Label" 0 --> 40 · bar [...] + line [...] together · values map by position.
sankey-betaCSV body: source,target,value per line · same string = same node · keep inflows equal to outflows.
radar-betaaxis id["Label"] · curve id["Label"]{4, 3, 2} · set max explicitly · v11.6+, the newest of the five.
Beta rulexychart and sankey graduated from -beta in current docs; both spellings work in v11. Radar and architecture keep -beta. When in doubt, check the docs page.
PickingShares → pie · effort/impact → quadrant · trend → xychart · flow volumes → sankey · multi-dimension coverage → radar.
HonestyThese are doc charts, not BI. One question per chart, real numbers, and a caption that says what to conclude.