Mermaid Quadrant Charts

Quadrant charts divide items into four quadrants based on two criteria. Perfect for prioritization matrices, feature planning, and decision-making frameworks.

Use Case

Use quadrant charts when you need to:

• Prioritize features or tasks
• Create 2x2 decision matrices
• Classify items by two criteria
• Visualize trade-offs
• Make strategic decisions

Code

 1```mermaid
 2quadrantChart
 3    title Prioritization Matrix
 4    x-axis Low --> High
 5    y-axis Low --> High
 6    quadrant-1 High Value
 7    quadrant-2 Quick Wins
 8    quadrant-3 Low Priority
 9    quadrant-4 High Effort
10    Feature A: [0.3, 0.6]
11    Feature B: [0.7, 0.8]
12    Feature C: [0.2, 0.3]
13```

Result:

Examples

Example 1: Feature Prioritization

 1```mermaid
 2quadrantChart
 3    title Feature Prioritization
 4    x-axis Low Effort --> High Effort
 5    y-axis Low Value --> High Value
 6    quadrant-1 High Value, High Effort
 7    quadrant-2 High Value, Low Effort
 8    quadrant-3 Low Value, Low Effort
 9    quadrant-4 Low Value, High Effort
10    Login: [0.2, 0.8]
11    Dashboard: [0.6, 0.9]
12    Reports: [0.8, 0.7]
13    Themes: [0.3, 0.4]
14```

Result:

Example 2: Risk vs Impact

 1```mermaid
 2quadrantChart
 3    title Risk vs Impact Analysis
 4    x-axis Low Risk --> High Risk
 5    y-axis Low Impact --> High Impact
 6    quadrant-1 High Impact, High Risk
 7    quadrant-2 High Impact, Low Risk
 8    quadrant-3 Low Impact, Low Risk
 9    quadrant-4 Low Impact, High Risk
10    Migration: [0.8, 0.9]
11    New Feature: [0.3, 0.8]
12    Bug Fix: [0.2, 0.6]
13    Refactor: [0.5, 0.4]
14```

Result:

Notes

• Coordinates: [x, y] where values are 0.0 to 1.0
• Quadrants numbered 1-4 (top-right, top-left, bottom-left, bottom-right)
• Axis labels define the criteria
• Quadrant labels describe each section

Gotchas/Warnings

• ⚠️ Coordinates: Values must be 0.0 to 1.0
• ⚠️ Quadrants: Numbered 1-4 starting top-right, clockwise
• ⚠️ Axes: Must define both x-axis and y-axis
• ⚠️ Labels: Keep quadrant labels concise

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js