🎯 Mermaid

Quadrant chart

Prioritize with a 2×2 matrix

What is a Quadrant chart?

A quadrant chart positions items on two axes — effort vs impact, urgency vs importance, risk vs reward. It is the classic prioritization tool for product, strategy and retrospectives.

Quadrant charts are decision artefacts: the last slide of a prioritisation workshop, the picture in a strategy memo, the retrospective where a team sorts what to keep. What they do well is force a position — nothing can sit “somewhere in the middle” without that being visible. What they hide is the reasoning: two people place the same item in different quadrants, and the chart records the result, never the argument. The axes carry no numbers, only their two end labels.

Live example

Mermaid code
quadrantChart
    title Feature prioritization
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Plan carefully
    quadrant-2 Do first
    quadrant-3 Skip
    quadrant-4 Quick wins
    Public sharing: [0.3, 0.85]
    Realtime collab: [0.85, 0.75]
    Dark mode: [0.2, 0.4]
Live example
Plan carefullyDo firstSkipQuick winsDark modeRealtime collabPublic sharingLow effortHigh effortLow impactHigh impactFeature prioritization

When to use it

Prioritize features by effort vs impact
Build Eisenhower matrices for planning
Position competitors or risks on strategic axes

Common mistakes

Coordinates outside 0 to 1

Writing A: [3, 8] is a lexical error, not a clipped point: both values must sit between 0 and 1. Scoring items out of ten? Divide by ten before writing the chart.

Quadrant numbers are not reading order

quadrant-1 is the top right, then anticlockwise: quadrant-2 top left, quadrant-3 bottom left, quadrant-4 bottom right. Label them from the corners of the picture, not from the order you would read them.

An axis without its arrow

x-axis Effort is valid and renders one label at the left end — no error, just a chart nobody can interpret. Write x-axis Low effort --> High effort so both extremes are named.

Basic syntax

.mmd
quadrantChart
    x-axis Low --> High
    y-axis Low --> High
    Item A: [0.3, 0.8]
  • quadrantChart title Feature prioritization

    The chart is always a 2×2 split at the midpoint of both axes. The title is what tells a reader which decision this particular picture is recording.

  • x-axis Low effort --> High effort y-axis Low impact --> High impact

    Each axis takes a start label and, after the arrow, an end label. Give both: with a single label, readers have to guess which way the scale runs.

  • Public sharing: [0.3, 0.85] radius: 12, color: #4f46e5

    A point can carry its own radius, fill and stroke colour after the coordinates — enough to make one item stand out without adding a legend.

  • classDef hot color: #ff0000, radius: 10 Realtime collab:::hot: [0.85, 0.75]

    classDef names a point style once and ::: applies it, which is how you mark a whole group — committed items, competitors, risks — consistently.

Questions about this diagram

How do I position items precisely?

Each item takes [x, y] coordinates between 0 and 1, so “Feature A: [0.2, 0.9]” lands in the low-effort, high-impact quadrant.

Can I rename the quadrants?

Yes — quadrant-1 through quadrant-4 accept custom labels like “Do first” or “Quick wins”, and both axes take start/end labels.

Can I paste a quadrant chart into Google Slides or PowerPoint?

Export PNG at 2× or 4× and paste it in, or SVG if the tool accepts vectors, since axis labels then stay sharp at any zoom. Re-export after each re-prioritisation rather than moving the points by hand.

Can I move the axis crossing point away from the centre?

No. The split is always at the midpoint of both axes, so “high impact” starts at 0.5 whatever your data looks like. Rescale your own scores before plotting when the interesting threshold sits somewhere else.

How many items fit before the labels overlap?

Mermaid does not move labels to avoid collisions, so around fifteen points is the practical ceiling, and fewer when several share a corner. Spread the coordinates slightly, split the chart by theme, or raise chartWidth to buy room without moving any point.

How do I make the chart bigger?

Put the size inside a quadrantChart block in the init directive on the first line: %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600}}}%%. The default is 500 by 500. Written outside that block the two keys are ignored, which is why long item names still overflow.

Quadrant chart or another diagram type?

Quadrant chart or pie chart?

A quadrant records where each item sits on two scales and nothing else: every dot is the same size unless you set a radius, so an item worth ten times another looks identical to it. When the size of each item is the message, draw a pie chart.

Quadrant chart or user journey?

Both score things, but not the same things. A journey scores the steps of one path, in order, with one number each; a quadrant scores independent items on two scales and has no order at all. If reordering your items would change their meaning, you need the journey.

Create your Quadrant chart now

Describe it in plain language — the AI writes the Mermaid code for you.

Open Mermaid Studio