← All diagram types

Mermaid quadrant chart syntax: axes, quadrants and points with examples

Mermaid quadrantChart syntax with rendered examples: titled axes, four labelled quadrants and points placed by x/y values from 0 to 1.

A quadrant chart sorts items into four boxes along two axes: effort against value, risk against reward, confidence against impact. Mermaid's quadrantChart places each item by a pair of coordinates and labels the four cells.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Axes and quadrant labels

The header is quadrantChart. x-axis and y-axis each take a low label and a high label separated by -->, and quadrant-1 to quadrant-4 name the four cells:

mermaid
quadrantChart
  title Feature prioritisation
  x-axis Low effort --> High effort
  y-axis Low value --> High value
  quadrant-1 Major projects
  quadrant-2 Quick wins
  quadrant-3 Fill-ins
  quadrant-4 Hard slogs
  Bulk import: [0.18, 0.7]
  Live preview: [0.6, 0.4]
Render this to PDF →How diagram blocks work

The numbering is fixed: quadrant-1 is top-right, quadrant-2 top-left, quadrant-3 bottom-left, quadrant-4 bottom-right. Both axes run from 0 to 1, and a higher y sits higher on the chart — y: 1 is the top edge.

Points

A point is a name, a colon, and [x, y] with both values between 0 and 1:

mermaid
quadrantChart
  title Feature prioritisation
  x-axis Low effort --> High effort
  y-axis Low value --> High value
  quadrant-1 Major projects
  quadrant-2 Quick wins
  quadrant-3 Fill-ins
  quadrant-4 Hard slogs
  Search indexing: [0.25, 0.8]
  API documentation: [0.2, 0.6]
  Dark mode: [0.4, 0.5]
  Collaboration: [0.68, 0.85]
Render this to PDF →How diagram blocks work

Points draw in source order, so a later point sits on top of an earlier one that shares its spot.

Comparing options

A quadrant chart earns its keep when the points are actual candidates and the axes are the decision. Anything left of 0.5 on effort and above 0.5 on value is a quick win:

mermaid
quadrantChart
  title Support channels to invest in
  x-axis Cheap to run --> Expensive to run
  y-axis Low satisfaction --> High satisfaction
  quadrant-1 Invest
  quadrant-2 Keep
  quadrant-3 Drop
  quadrant-4 Automate
  Docs site: [0.15, 0.88]
  Community forum: [0.42, 0.62]
  Phone support: [0.88, 0.55]
  Email queue: [0.75, 0.2]
Render this to PDF →How diagram blocks work

Axis labels on one side

Both labels are optional. x-axis Effort alone puts one label under the axis and nothing at the other end, which is enough when the direction is obvious:

mermaid
quadrantChart
  title Migration candidates
  x-axis Effort
  y-axis Risk
  quadrant-1 Do now
  quadrant-2 Plan
  quadrant-3 Skip
  quadrant-4 Delegate
  Billing service: [0.35, 0.15]
  Auth service: [0.55, 0.45]
  Legacy report: [0.8, 0.62]
Render this to PDF →How diagram blocks work

Not supported in makesPDF yet: per-point style suffixes (radius:, color:) are parsed but not applied — every point is the same marker. A point's name is drawn to the right of its dot (to the left when the point sits past x: 0.85), and nothing stops a long name from running past the chart frame — keep point names short, or keep long ones away from the right edge.