Mermaid quadrant chart examples

Mermaid quadrant chart syntax

The quadrant chart was added in Mermaid 10.2.0 and its syntax has stayed small. Every statement is optional apart from the keyword; a chart with no points draws the axis labels and quadrant names centred in their quadrants, and once points exist the x-axis labels move to the bottom edge and the quadrant names to the top of each quadrant.

Axis statements name the ends of an axis, not a scale. x-axis Left --> Right renders both labels, x-axis Left only the left one; y-axis Bottom --> Top works the same way from bottom to top. Mermaid 11.15.0 extended the parser so that unquoted labels may contain accented, CJK and emoji characters.

How do the coordinates work?

Both coordinates are fractions of the chart: [0, 0] is the bottom-left corner and [1, 1] the top-right, so [0.5, 0.5] sits exactly on the crossing of the quadrant lines. To plot real data, scale it yourself; a risk scored 4 out of 5 for likelihood becomes 0.8. Mermaid does not draw tick marks or numbers along the axes, which keeps the chart honest about being a judgement rather than a measurement.

Points are drawn in the order written, and a label is placed under each point. When two points are close their labels overlap, so spread the values a little or shorten the names. The default point radius is 5; raise pointRadius in the config to make the chart readable at a glance, as the vendor example does.

Which options does a quadrant chart have?

Layout options live under config: quadrantChart and colours under config: themeVariables, both in the YAML block at the top of the diagram. These are the ones you are most likely to need; Mermaid’s documentation lists the full set, including padding and font sizes for every text element.

Where does a quadrant chart render, and when is it the wrong chart?

Because the type dates from Mermaid 10.2.0, any platform on Mermaid 10.2 or later draws the basic chart; per-point styling and classDef are documented for 11.16 and may not exist on an older renderer, so test them where the document will be read. GitHub renders mermaid blocks in issues, pull requests, discussions, wikis and Markdown files and suggests the info diagram to check its version; the Mermaid in Markdown page covers that check and the other platforms. Outside those platforms, paste the Markdown into the Docs MD editor and share the rendered page.

A quadrant chart is for sorting a short list of items by two judgements. It is the wrong choice for measured data with real scales, where a bar chart or line chart shows the numbers, and for comparing one item across many criteria, where a radar chart fits. More than about fifteen points makes the labels collide; split the chart by team or by time period instead.

What range do Mermaid quadrant chart points use?

Both coordinates run from 0 to 1. Mermaid’s documentation states that the minimum is 0 and the maximum is 1, with [0, 0] at the bottom left and [1, 1] at the top right. Convert your own scores before plotting, for example by dividing a 1-to-10 score by 10. Values outside the range are not meaningful and may draw outside the quadrants.

Which quadrant is quadrant-1 in Mermaid?

The top-right one, where both x and y are high. The numbering continues anticlockwise: quadrant-2 is top left, quadrant-3 bottom left and quadrant-4 bottom right. This matches the mathematical convention for quadrants of a plane. When you write a priority matrix, put the label for high-urgency, high-importance items on quadrant-1.

Can I colour individual points in a quadrant chart?

Yes. After the coordinates add color: #hex and optionally radius, stroke-color and stroke-width, separated by commas. For several points with the same look, define a class with classDef name color: #hex, radius: 9 and attach it with Name:::name: [x, y]. Direct styles win over class styles, and class styles win over theme variables such as quadrantPointFill.

Why are my x-axis labels at the bottom even though I set xAxisPosition to top?

Because the chart has points. Mermaid’s documentation says the xAxisPosition option only applies to a chart without points; as soon as any point is plotted, the x-axis labels are drawn at the bottom and the quadrant labels move to the top of each quadrant. Remove the points to see the labels centred, or accept the bottom placement, which is what readers expect.

Does GitHub render Mermaid quadrant charts?

GitHub renders Mermaid blocks in issues, pull requests, discussions, wikis and Markdown files, and it chooses the Mermaid version it runs; the quadrant chart needs 10.2.0 or later and point styling is newer still. Its documentation suggests rendering an info block to see the version in use. If the basic chart draws but styled points do not, remove the styling or keep the chart in a document rendered elsewhere.