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.
Which chart when
Each type answers exactly one question shape. Match the question, not the aesthetics.
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.
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.
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.
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.
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.
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.
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.
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.
Try it yourself - this week ◐ 20-30 min total
- Put ONE of these five charts into a real document at work this week - a cost pie in the budget doc, a sankey in the pipeline runbook, a radar in the team plan. One is enough; living in a real doc is the point.
- Pull real numbers for it - a GROUP BY, a billing export, an honest guess reviewed by a teammate. Fake-looking numbers kill chart credibility faster than bad colors.
- Balance drill: extend the Nova sankey with one more destination (say, a data share to Finance) and keep every node's inflow equal to its outflow.
- Check your renderer: paste the xy and sankey examples wherever YOUR docs live - if the host's mermaid is older, switch keywords between beta and non-beta forms per its docs.
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.
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.