Quadrant charts: axes and quadrants

简介 / Introduction

Quadrant charts divide the plotting area into four regions by two dimensions, commonly used for urgency vs importance, or effort vs impact analysis. This article covers how to draw quadrant charts in both PlantUML and Mermaid, including axis labels, quadrant fills, and label positioning.

PlantUML 版

PlantUML uses the salt renderer to simulate quadrant charts with grid cells and background colors:

1
2
3
4
5
6
7
8
9
10

@startuml
salt
{
  {+
    <back:#FFB3B3>Urgent</back> || <back:#FFDAB3>Important</back>
    --
    <back:#B3D9FF>Not Urgent</back> || <back:#B3FFB3>Not Important</back>
  }
}
@enduml

PlantUML has no native quadrant coordinate system, but salt grid with colored cells can approximate the layout.

Mermaid 版

Mermaid v10+ supports quadrantChart for direct quadrant visualization with axes:

1
2
3
4
5
6
7
8
9
10
11
12

quadrantChart
  title Urgency vs Importance
  x-axis [Urgency --> Calm]
  y-axis [Importance --> Trivial]
  quadrant-1 Do Immediately
  quadrant-2 Schedule It
  quadrant-3 Delegate
  quadrant-4 Avoid
  A: [0.8, 0.6]
  B: [0.3, 0.7]
  C: [0.1, 0.2]
  D: [0.9, 0.1]

对比 / Side-by-side

小结 / Wrap-up

Mermaid’s quadrantChart is the most straightforward way to draw quadrant charts, supporting axes, quadrant labels, and data points. PlantUML’s salt grid can approximate a basic quadrant layout for scenarios that don’t need data points.