Mermaid Quadrant Chart Tutorial: Two-Axis Priority and Positioning Charts

The two-by-two matrix is a staple of strategy and product work: effort versus impact, urgency versus importance, reach versus differentiation. Its power is that placing items in a plane with two meaningful axes forces a decision - a feature is either high-impact-low-effort or it is not, and the position makes the priority visible. Mermaid's "quadrantChart" lets you build one from text: you name the axes, optionally label the four quadrants, and list each item with its x and y coordinates.

This guide covers the quadrantChart syntax and how to use it without the common traps of coordinate-based plotting, with examples for the Mermaid editor at /diagram-tools/mermaid-editor. The result is an editable chart in Atlas Diagram Studio at /diagrams that you can restyle and drop into a strategy deck. Because positioning is often subjective, the AI diagram generator at /diagram-tools/ai-diagram-generator can suggest a first placement from your description, which you then argue with and adjust.

Setting up the axes and quadrants

A quadrant chart starts with "quadrantChart" and an optional "title". You then define the two axes with the "x-axis" and "y-axis" keywords, where each axis label can name both ends of the scale using "-->" between them - for example "x-axis Low Effort --> High Effort". This double-ended labeling is what makes the chart self-explanatory, because a reader sees at a glance what moving right or up means without needing a legend.

The four quadrants are labeled with "quadrant-1" through "quadrant-4", numbered starting from the top-right and going counterclockwise: quadrant-1 is top-right, quadrant-2 top-left, quadrant-3 bottom-left, and quadrant-4 bottom-right. Naming them with the action they imply - "Do now," "Plan," "Delegate," "Drop" - turns the chart from an abstract plane into a decision aid, since each region carries an instruction rather than just a position.

Plotting points and the coordinate system

Points are the items you are positioning, and each is written as a label followed by a colon and its coordinates in square brackets. The bullets below cover the full plotting syntax and the coordinate conventions that trip people up.

• Define an axis with both ends: "x-axis Low Impact --> High Impact".
• Label a quadrant with its meaning: "quadrant-1 Do now".
• Remember quadrant numbering starts top-right and goes counterclockwise.
• Plot a point with normalized coordinates from 0 to 1: "Feature A: [0.7, 0.9]".
• The first number is the x position (0 is far left, 1 is far right); the second is y (0 is bottom, 1 is top).
• Style an individual point inline with class-like directives, e.g. "radius", "color", and "stroke-color".
• Keep labels short so points do not overlap into an unreadable cluster.

Making the placement honest

The coordinates are normalized from 0 to 1, which is a design choice worth internalizing: you are not plotting real measured values but relative positions on two subjective scales. That is appropriate for the kind of judgment a two-by-two captures, but it also means the placements are arguable, and the chart is most useful as a conversation artifact - a team looks at where someone put each item and debates whether it belongs there. Treat the coordinates as a starting proposal, not a measurement.

A practical tip is to place the axis-defining extremes first in your head - decide what a 0.9 on impact actually means - before plotting anything, so the whole chart is calibrated consistently. Without that calibration, different items get positioned against different mental yardsticks and the chart loses its meaning. When items cluster in one corner, that is often real signal that your axes are not discriminating well, and it is worth choosing more separating dimensions.

When to use a quadrant chart

A quadrant chart is the right tool when you are prioritizing or positioning a set of items against exactly two dimensions and the four resulting regions carry meaning. Product backlogs by effort and impact, initiatives by urgency and importance, competitors by two market axes, and risks by likelihood and severity all fit perfectly. If you have more than two dimensions that matter, a quadrant flattens them misleadingly, and if you have precise numeric data, an xychart scatter or bar chart represents it more faithfully.

Because it is text, a quadrant chart is easy to revisit as priorities shift - move a point by editing two numbers. Build it in the Mermaid editor at /diagram-tools/mermaid-editor, style it in Atlas Diagram Studio at /diagrams, and it is ready for a planning meeting. For the neighboring analytical diagrams, the complete Mermaid guide at /guides/mermaid-js-complete-guide covers xychart and pie, and the guide on turning plain English into diagrams at /guides/text-to-diagram-with-ai covers drafting a matrix from a prompt.