Mermaid Quadrant Chart Syntax & Examples
Reference for Mermaid quadrantChart syntax — title, x-axis / y-axis declarations, quadrant labels, and point placement with [x, y] coordinates. Copy-paste 2x2 examples.
Syntax reference, layout guidance, and ready-to-open examples for this diagram type.
A syntax reference for Mermaid's quadrantChart grammar — read this when you need the exact way to label axes, name quadrants, or position points on the 0-1 coordinate plane, then try the result in the editor.
Mermaid quadrantChart constructs, one per row
| Construct | Syntax | Notes |
|---|---|---|
| Diagram keyword | quadrantChart | First line. Everything below it is optional — a chart of nothing but points is valid. |
| Chart title | title Reach and engagement of campaigns | Own line, under the keyword. Unlike pie, it cannot ride on the header line. |
| X axis, both ends | x-axis Low Reach --> High Reach | The text before --> labels the left edge, the text after it the right edge. |
| X axis, one end | x-axis Effort | Dropping the --> half is legal: the axis gets a single label at its low end. |
| Y axis | y-axis Low Impact --> High Impact | Same shape as the x-axis. The first label is the BOTTOM of the chart, not the top. |
| Region label | quadrant-1 "Do now" | Numbered counterclockwise from the top-right: 1 = top-right, 2 = top-left, 3 = bottom-left, 4 = bottom-right. |
| Point | "Campaign A": [0.3, 0.6] | Label, colon, then x and y as 0-1 floats. (0,0) is bottom-left. Quote a label that contains a colon. |
| Point size | "Campaign A": [0.3, 0.6] radius: 25 | Use it to encode a third value — revenue, headcount, effort. Beauty Diagram scales it to the rendered chart. |
| Point class | "Campaign A":::big: [0.3, 0.6] | Binds the point to a class. The triple colon goes after the label, before the coordinate colon. |
| Class declaration | classDef big radius: 20 | May be written after the points that use it. A radius on the point itself wins over the class. |
| Point colour | color: #ff3300, stroke-width: 5px | Accepted after the coordinates, but Beauty Diagram colours the chart from the theme you pick. |
| Chart config | %%{init: {"quadrantChart": {"chartWidth": 600}}}%% | Sizing, padding and font keys parse without error and are ignored — layout here is automatic. |
Syntax reviewed
View Mermaid sourcePlain-text diagram syntax — copy or edit directly.
1quadrantChart2 title Impact vs Effort3 x-axis Low Effort --> High Effort4 y-axis Low Impact --> High Impact5 quadrant-1 "Do now"6 quadrant-2 "Schedule"7 quadrant-3 "Deprioritise"8 quadrant-4 "Reconsider"9 "Ship landing page": [0.2, 0.8]10 "Refactor billing": [0.8, 0.85]11 "Fix typos": [0.1, 0.15]12 "Rebuild analytics": [0.7, 0.3]What is a Mermaid quadrant chart
A quadrant chart is a 2x2 grid where two axes divide the plane into four regions, and items are plotted as points based on their values on each axis. It is the right shape when the question is how-do-these-items-compare-on-two-dimensions: impact vs effort, value vs risk, reach vs cost, importance vs urgency. Quadrant charts are common in product strategy (feature prioritisation), competitive analysis (positioning), and decision workshops (project triage). They visualise a trade-off in one glance and make groupings ("top-right quadrant") into shorthand for decisions.
Basic syntax — quadrantChart + axes + points
Every Mermaid quadrant chart starts with quadrantChart. The basic structure has four parts: a title, two axis declarations (x-axis Low Effort --> High Effort), four quadrant labels (quadrant-1 "Do now" through quadrant-4 "Reconsider"), and a list of points ("Item name": [0.5, 0.5]). The two axis labels describe the extremes of each dimension. The four quadrant labels describe what each region means — pick verbs or short phrases. Points are positioned as [x, y] coordinates on a normalised 0-to-1 scale.
quadrantChart— diagram type keywordtitle <Text>— chart headingx-axis <Low end> --> <High end>— horizontal axis with extremes labelledy-axis <Low end> --> <High end>— vertical axis with extremes labelled
Quadrant labels — naming the four regions
The four quadrants are numbered counterclockwise starting from the top-right: quadrant-1 is top-right (high x, high y), quadrant-2 is top-left (low x, high y), quadrant-3 is bottom-left (low x, low y), quadrant-4 is bottom-right (high x, low y). Each takes a quoted label that describes what items in that region mean — usually a recommendation or category. The classic impact-effort matrix uses "Do now / Schedule / Deprioritise / Reconsider" for the four quadrants. The labels appear in the rendered corners of the chart and become the shorthand readers use to discuss the items.
quadrant-1— top-right (high x, high y)quadrant-2— top-left (low x, high y)quadrant-3— bottom-left (low x, low y)quadrant-4— bottom-right (high x, low y)
Plotting points — [x, y] coordinates
Each point is declared as "Item label": [x, y]. The coordinates are floating-point values between 0 and 1, where (0, 0) is the bottom-left corner and (1, 1) is the top-right. Point placement is purely declarative — whatever values you supply are where the point goes. To position something "high impact, low effort" (top-left in impact-effort), you'd use values like [0.2, 0.8]. Each point's label is drawn next to it.
Point size — encoding a third dimension
A point can carry a size: "Enterprise plan": [0.8, 0.85] radius: 30. This is the one styling property worth using, because it carries information the two axes cannot — revenue, headcount, team size, hours of effort. A quadrant chart with varied point sizes is really a bubble chart with named regions, and it answers "which of these matters most?" on top of "where does each one sit?". You can also put radius on a classDef and bind it with Item:::className: [x, y], which is the tidier form when several items share a size. Beauty Diagram honours the radius and scales it to the rendered chart; an explicit radius on the point wins over the one it inherits from its class.
"Item": [0.8, 0.85] radius: 30— size on the pointclassDef big radius: 30+"Item":::big: [0.8, 0.85]— size on a class- Keep the biggest point well under a quarter of the chart or it swamps its neighbours
How Beauty Diagram renders a quadrant chart
The same source produces a very different picture here, and the difference is almost entirely about labels. Point labels are placed so they do not collide: each one sits beside its point, flips to the other side when it would run off the edge, and steps up or down until it clears the other labels, the other points, the four region captions and the axis labels. Region captions move out of the way of the data rather than the other way round — a point's position means something and a caption's does not. Long labels are trimmed to fit rather than allowed to overrun the chart. Axis labels set in Chinese, Japanese or Korean are stacked upright instead of being rotated on their side, which is unreadable at axis-label size. Colours come from the theme you pick, so the four regions stay distinguishable and the whole chart matches everything else in your deck.
Common patterns & gotchas
Three patterns cover most real quadrant charts. Feature prioritisation (Impact vs Effort) is the most common — features cluster in the four corners and the strategy follows from where they sit. Competitive positioning (Price vs Quality, or feature breadth vs depth) is the second — your product and competitors get plotted, gaps in the chart are positioning opportunities. Risk-value triage (Value vs Risk) is the third. The most common gotcha: forgetting that quadrant labels stay fixed even if your points cluster in only two regions — empty quadrants are still labelled and look awkward; either reposition the axes so points spread better, or accept the asymmetry as part of the message ("nothing falls into Deprioritise — we're already focused").
- Coordinates are 0-1 floats — (0,0) bottom-left, (1,1) top-right
- Quadrants numbered counterclockwise starting top-right
- Around a dozen points is the readable limit — past that it's a list, not a picture