Mermaid Quadrant Chart Syntax

What a Mermaid quadrant chart is for

A quadrant chart places items on two axes split into four quadrants, like an effort versus impact matrix or a Gartner-style map. Coordinates run from 0 to 1 on each axis.

Quadrant Chart syntax

Basic example

quadrantChart
    title Effort vs impact
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Plan carefully
    quadrant-2 Do first
    quadrant-3 Maybe later
    quadrant-4 Avoid
    Dark mode: [0.25, 0.4]
    SSO: [0.7, 0.85]
    CSV export: [0.15, 0.7]
    Rewrite in Rust: [0.9, 0.3]

Open this example in the Mermaid editor

Common mistakes

• Quadrants are numbered counterclockwise starting top right, like in math, not reading order.

Use it in Markdown

```mermaid
quadrantChart
    title Effort vs impact
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Plan carefully
    quadrant-2 Do first
    quadrant-3 Maybe later
    quadrant-4 Avoid
    Dark mode: [0.25, 0.4]
    SSO: [0.7, 0.85]
    CSV export: [0.15, 0.7]
    Rewrite in Rust: [0.9, 0.3]
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid pie chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Quadrant Chart

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions