Skill Tracer
Skills › Scientific Agent Skills › markdown-mermaid-writing › quadrant.md

quadrant.md

75 lines · skills/markdown-mermaid-writing/references/diagrams/quadrant.md at 5f2bc03

Open on GitHub
1<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
2
3# Quadrant Chart
4
5> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
6
7**Syntax keyword:** `quadrantChart`
8**Best for:** Prioritization matrices, risk assessment, two-axis comparisons, effort/impact analysis
9**When NOT to use:** Time-based data (use [Gantt](gantt.md) or [XY Chart](xy_chart.md)), simple rankings (use a table)
11> **Accessibility:** Mermaid 12.0.0 emits `accTitle`/`accDescr` for this type. Keep a visible description and verify older destination renderers.
13---

<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->

Quadrant Chart

Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.

Syntax keyword: quadrantChart Best for: Prioritization matrices, risk assessment, two-axis comparisons, effort/impact analysis When NOT to use: Time-based data (use Gantt or XY Chart), simple rankings (use a table)

Accessibility: Mermaid 12.0.0 emits accTitle/accDescr for this type. Keep a visible description and verify older destination renderers.
Raw lines 1 to 14
15## Exemplar Diagram
17_Priority matrix plotting engineering initiatives by effort required versus business impact, helping teams decide what to build next:_
19```mermaid
20quadrantChart
21 accTitle: Quadrant Example
22 accDescr: Illustrative quadrant diagram; the surrounding text describes its data and relationships.
23 title 🎯 Engineering Priority Matrix
24 x-axis Low Effort --> High Effort
25 y-axis Low Impact --> High Impact
26 quadrant-1 Plan Carefully
27 quadrant-2 Quick Wins
28 quadrant-3 Low Priority
29 quadrant-4 Reconsider
30 Upgrade auth library: [0.3, 0.9]
31 Migrate to new DB: [0.9, 0.8]
32 Fix typos in docs: [0.1, 0.2]
33 Add dark mode: [0.4, 0.6]
34 Rewrite legacy API: [0.95, 0.95]
35 Update CI cache: [0.15, 0.35]
36 Add unit tests: [0.5, 0.7]
37```
39---

Exemplar Diagram

Priority matrix plotting engineering initiatives by effort required versus business impact, helping teams decide what to build next:

quadrantChart
    accTitle: Quadrant Example
    accDescr: Illustrative quadrant diagram; the surrounding text describes its data and relationships.
    title 🎯 Engineering Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan Carefully
    quadrant-2 Quick Wins
    quadrant-3 Low Priority
    quadrant-4 Reconsider
    Upgrade auth library: [0.3, 0.9]
    Migrate to new DB: [0.9, 0.8]
    Fix typos in docs: [0.1, 0.2]
    Add dark mode: [0.4, 0.6]
    Rewrite legacy API: [0.95, 0.95]
    Update CI cache: [0.15, 0.35]
    Add unit tests: [0.5, 0.7]
Raw lines 15 to 40
41## Tips
43- Label axes with `Low X --> High X` format
44- Name all four quadrants with **actionable** labels
45- Plot items as `Name: [x, y]` with values 0.0–1.0
46- Limit to **5–10 items** — more becomes cluttered
47- Quadrant numbering: 1=top-right, 2=top-left, 3=bottom-left, 4=bottom-right
48- **Always** pair with a Markdown text description above for screen readers
50---

Tips

  • Label axes with Low X --> High X format
  • Name all four quadrants with actionable labels
  • Plot items as Name: [x, y] with values 0.0–1.0
  • Limit to 5–10 items — more becomes cluttered
  • Quadrant numbering: 1=top-right, 2=top-left, 3=bottom-left, 4=bottom-right
  • Always pair with a Markdown text description above for screen readers
Raw lines 41 to 51
52## Template
54_Description of the two axes and what the quadrant placement means:_
56```mermaid
57quadrantChart
58 accTitle: Quadrant Example
59 accDescr: Illustrative quadrant diagram; the surrounding text describes its data and relationships.
60 title 🎯 Your Matrix Title
61 x-axis Low X Axis --> High X Axis
62 y-axis Low Y Axis --> High Y Axis
63 quadrant-1 High Both
64 quadrant-2 High Y Only
65 quadrant-3 Low Both
66 quadrant-4 High X Only
67 Item A: [0.3, 0.8]
68 Item B: [0.7, 0.6]
69 Item C: [0.2, 0.3]
70```

Template

Description of the two axes and what the quadrant placement means:

quadrantChart
    accTitle: Quadrant Example
    accDescr: Illustrative quadrant diagram; the surrounding text describes its data and relationships.
    title 🎯 Your Matrix Title
    x-axis Low X Axis --> High X Axis
    y-axis Low Y Axis --> High Y Axis
    quadrant-1 High Both
    quadrant-2 High Y Only
    quadrant-3 Low Both
    quadrant-4 High X Only
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.6]
    Item C: [0.2, 0.3]
Raw lines 52 to 72
73## Verified reference
75Syntax examples reviewed against [official Mermaid documentation](https://mermaid.js.org/syntax/quadrantChart.html) and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Verified reference

Syntax examples reviewed against official Mermaid documentation and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Raw lines 73 to 75