Quadrant chart

Quadrant charts place labelled points on two axes split into four named quadrants, the classic prioritisation matrix. zombie-mermaid renders the quadrants, axis labels and point styles in SVG and as a character grid in ASCII.

Campaigns plotted by reach and engagement.

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Where quadrant charts come from, and how the syntax works.

Quadrant charts sort items by two criteria at once, such as effort against impact or urgency against importance, and are a staple of prioritisation and strategy docs. Mermaid’s syntax starts with `quadrantChart`, an optional `title`, an `x-axis` and `y-axis` with a low and a high label, and up to four `quadrant-N` names. Each point is a `Label: [x, y]` line with both coordinates between 0 and 1, and `classDef` or inline styles can set its color, radius and stroke.

Every Quadrant chart example, on its own page.

Explore the other diagram types.