TryMermaid

Mermaid Quadrant Chart Maker

Write quadrant charts in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Quadrant chart example

Rendering preview…

quadrantChart
    title Which features to build next
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Do now
    quadrant-2 Plan properly
    quadrant-3 Drop
    quadrant-4 Quick wins
    Dark mode: [0.28, 0.72]
    Team billing: [0.78, 0.86]
    Icon picker: [0.22, 0.34]
    Rewrite the parser: [0.92, 0.28]
Open this example in the editor Start a blank diagram

What is a quadrant chart?

A quadrant chart plots items on two axes and divides the result into four labelled boxes, so that where something sits tells you what to do about it. It is the shape behind effort-versus-impact and urgent-versus-important grids. In Mermaid you write a quadrant chart as text starting with the quadrantChart keyword.

When to use a quadrant chart

  • Effort versus impact prioritisation
  • Risk and probability grids
  • Competitive positioning
  • Eisenhower urgent versus important matrices

How to make a quadrant chart in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with quadrantChart on the first line.

  2. Step 2

    Set the axes

    Name the axes with x-axis and y-axis lines, giving each a low and high label so the grid reads clearly.

  3. Step 3

    Label and plot

    Label the four boxes with quadrant-1 to quadrant-4, then plot each item with coordinates between 0 and 1.

  4. Step 4

    Export or share

    Check the live preview, then export as PNG or SVG or copy a share link.

Quadrant chart syntax cheat sheet

ElementSyntaxWhat it does
StartquadrantChartBegins a quadrant chart
Titletitle Feature priorityHeading above the chart
X axisx-axis Low effort --> High effortLabels both ends of the horizontal axis
Y axisy-axis Low impact --> High impactLabels both ends of the vertical axis
Quadrant labelquadrant-1 Do nowNames one of the four boxes
PointDark mode: [0.28, 0.72]Plots an item at x, y between 0 and 1

Quadrant chart FAQ

What do the two numbers after each item mean?

Both are numbers between 0 and 1 giving the position along the x and y axes, where [0, 0] is the bottom left and [1, 1] is the top right. They are relative positions, not real units.

Which quadrant is which?

Quadrant 1 is the top right, quadrant 2 the top left, quadrant 3 the bottom left and quadrant 4 the bottom right. Label them with quadrant-1 through quadrant-4.

Can I label both ends of an axis?

Yes. Write the axis as a label pair, such as x-axis Low effort --> High effort, and Mermaid prints both ends of the scale.

Other Mermaid diagram types