Mermaid Quadrant Chart Cheat Sheet

Two axes, four quadrants, and the points plotted on them.

Every picture on this page was drawn by

Mernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

The two axes

x-axis and y-axis each carry the low end and the high end, with an arrow between them.

quadrantChart
    x-axis Low --> High
    y-axis Low --> High

One line per quadrant. There is no colon: the whole rest of the line is the label.

quadrantChart
    x-axis Low --> High
    y-axis Low --> High
    quadrant-1 We do
    quadrant-2 Invest
    quadrant-3 Improve
    quadrant-4 Ignore

A point is a name and a pair of numbers, each between 0 and 1.

quadrantChart
    x-axis Low --> High
    y-axis Low --> High
    Point A: [0.3, 0.6]
    Point B: [0.75, 0.8]

The title goes on its own line, before the axes.

quadrantChart
    title Reach and engagement
    x-axis Low --> High
    y-axis Low --> High
    quadrant-1 We do
    Point A: [0.3, 0.6]