Quadrant charts are one of the most used diagram types in strategic planning, product roadmapping, and competitive analysis. The Mermaid implementation provides a solid foundation but has four gaps that prevent it from being used with real-world data or in interactive contexts:
- Axis ranges are always 0–1, forcing users to manually normalize every real-world value before plotting
- Point grouping is not supported — all points render with identical styling regardless of category
- Points are not interactive — no href links, no click events, no tooltip support
- Per-point subtitles cannot be added — only the point name is displayed
Background & Context
The quadrant chart is frequently used to produce Gartner-style Magic Quadrant visuals, Eisenhower priority matrices, and market landscape maps. In all these use cases, data has a natural scale — NPS scores run 0–100, market share runs 0–100%, completion percentages are whole numbers. Forcing these into 0–1 creates two problems: the diagram source becomes unreadable, and values must be manually recomputed whenever the underlying data changes.
When plotting competitive landscapes — as shown in the demo page with Microsoft, Salesforce, IBM, and Incorta — it is essential to visually group entities. A "current vendor" group and a "challenger" group should be immediately distinguishable by color or shape. Today, all four points render as identical black dots.
The absence of clickable points is a hard blocker for teams who want to embed a quadrant chart in a wiki and have each point link to a product brief, competitor analysis page, or internal ticket. This capability already exists for flowchart nodes via click A href "..." and should extend to quadrant data points.
Proposed Syntax & Config
Explicit axis ranges:
quadrantChart
x-axis "Completeness of Vision" 0 --> 100
y-axis "Ability to Execute" 0 --> 100
Microsoft: [78, 82]
Salesforce: [61, 67]
IBM: [54, 44]
Incorta: [22, 31]
When range values are provided after the axis label, the renderer uses them as bounds and draws tick marks accordingly. Omitting them falls back to the current 0–1 normalized range for full backward compatibility.
Named point groups:
group "Current Vendors" color #378ADD {
Microsoft: [78, 82]
Salesforce: [61, 67]
}
group "Challengers" color #D85A30 {
IBM: [54, 44]
Incorta: [22, 31]
}
Each group renders its points in the declared color with an automatic legend entry. Groups can optionally specify a shape (circle, square, diamond) for colorblind accessibility.
Clickable points with href:
Microsoft: [78, 82] href "https://microsoft.com/azure" "_blank"
Salesforce: [61, 67] href "https://salesforce.com"
Mirrors the existing click A href "..." pattern in flowcharts. Points with an href render with a pointer cursor and a subtle underline on their label to signal interactivity.
Per-point subtitles:
Microsoft: [78, 82] subtitle "Leader since 2019"
Salesforce: [61, 67] subtitle "Strong in CRM"
Renders as smaller muted text directly below the point label. Font size defaults to 80% of the label size.
Interactivity & Event Spec
The renderer should emit a DOM custom event when any data point is clicked, enabling headless and embedded use cases:
document.querySelector('.mermaid svg').addEventListener(
'mermaid:quadrant:click',
(e) => console.log(e.detail)
)
// e.detail: { label: "Microsoft", x: 78, y: 82, group: "Current Vendors" }This mirrors how Mermaid already exposes click callbacks for flowcharts via securityLevel: 'loose'.
Quadrant charts are one of the most used diagram types in strategic planning, product roadmapping, and competitive analysis. The Mermaid implementation provides a solid foundation but has four gaps that prevent it from being used with real-world data or in interactive contexts:
Background & Context
The quadrant chart is frequently used to produce Gartner-style Magic Quadrant visuals, Eisenhower priority matrices, and market landscape maps. In all these use cases, data has a natural scale — NPS scores run 0–100, market share runs 0–100%, completion percentages are whole numbers. Forcing these into 0–1 creates two problems: the diagram source becomes unreadable, and values must be manually recomputed whenever the underlying data changes.
When plotting competitive landscapes — as shown in the demo page with Microsoft, Salesforce, IBM, and Incorta — it is essential to visually group entities. A "current vendor" group and a "challenger" group should be immediately distinguishable by color or shape. Today, all four points render as identical black dots.
The absence of clickable points is a hard blocker for teams who want to embed a quadrant chart in a wiki and have each point link to a product brief, competitor analysis page, or internal ticket. This capability already exists for flowchart nodes via
click A href "..."and should extend to quadrant data points.Proposed Syntax & Config
Explicit axis ranges:
When range values are provided after the axis label, the renderer uses them as bounds and draws tick marks accordingly. Omitting them falls back to the current 0–1 normalized range for full backward compatibility.
Named point groups:
Each group renders its points in the declared color with an automatic legend entry. Groups can optionally specify a
shape(circle,square,diamond) for colorblind accessibility.Clickable points with href:
Mirrors the existing
click A href "..."pattern in flowcharts. Points with an href render with a pointer cursor and a subtle underline on their label to signal interactivity.Per-point subtitles:
Renders as smaller muted text directly below the point label. Font size defaults to 80% of the label size.
Interactivity & Event Spec
The renderer should emit a DOM custom event when any data point is clicked, enabling headless and embedded use cases:
This mirrors how Mermaid already exposes click callbacks for flowcharts via
securityLevel: 'loose'.