Official Mermaid documentation: Quadrant chart.
Note
All Mermaid diagrams can be configured, by passing a MermaidConfig object to any of the methods in the Mermaid class. Read more on Mermaid configuration.
The following code sample shows how to create a simple Mermaid quadrant chart.
Use the QuadrantChart method of the Mermaid class to create a quadrant chart.
Add points with the AddPoint method. Coordinates must be between 0 and 1 included.
Generate the diagram mermaid code with the Build method.
var quadrantChart = Mermaid
.QuadrantChart()
.AddPoint("A", 0.1, 0.2)
.AddPoint("B", 0.3, 0.4)
.Build();The code above generates the following Mermaid code:
quadrantChart
A: [0.1, 0.2]
B: [0.3, 0.4]
That renders as:
quadrantChart
A: [0.1, 0.2]
B: [0.3, 0.4]
The title of the quadrant chart can be set by setting the title parameter of the QuadrantChart method.
Example:
var quadrantChart = Mermaid
.QuadrantChart(title: "Some title")
.AddPoint("A", 0.1, 0.2)
.AddPoint("B", 0.3, 0.4)
.Build();The code above generates the following Mermaid code:
---
title: Some title
---
quadrantChart
A: [0.1, 0.2]
B: [0.3, 0.4]
That renders as:
---
title: Some title
---
quadrantChart
A: [0.1, 0.2]
B: [0.3, 0.4]
Quadrant labels can be set by setting the quadrants parameter of the QuadrantChart method.
Example:
var quadrantChart = Mermaid
.QuadrantChart(
quadrant1: "Quadrant 1",
quadrant2: "Quadrant 2",
quadrant3: "Quadrant 3",
quadrant4: "Quadrant 4")
.AddPoint("A", 0.1, 0.2)
.AddPoint("B", 0.3, 0.4)
.Build();The code above generates the following Mermaid code:
quadrantChart
quadrant-1 Quadrant 1
quadrant-2 Quadrant 2
quadrant-3 Quadrant 3
quadrant-4 Quadrant 4
A: [0.1, 0.2]
B: [0.3, 0.4]
That renders as:
quadrantChart
quadrant-1 Quadrant 1
quadrant-2 Quadrant 2
quadrant-3 Quadrant 3
quadrant-4 Quadrant 4
A: [0.1, 0.2]
B: [0.3, 0.4]
Axis labels can be set by using the SetXAxisLabel and SetYAxisLabel methods. They can take one or two parameters. If only one parameter is provided, it will be used as the label positioned at the start of the axis. If two parameters are provided, the first will be used as the label positioned at the start of the axis, and the second will be used as the label positioned at the end of the axis.
Example:
var quadrantChart = Mermaid
.QuadrantChart()
.SetXAxisLabel("Left", "Right")
.SetYAxisLabel("Bottom", "Top")
.AddPoint("A", 0.1, 0.2)
.AddPoint("B", 0.3, 0.4)
.Build();The code above generates the following Mermaid code:
quadrantChart
x-axis Left --> Right
y-axis Bottom --> Top
A: [0.1, 0.2]
B: [0.3, 0.4]
That renders as:
quadrantChart
x-axis Left --> Right
y-axis Bottom --> Top
A: [0.1, 0.2]
B: [0.3, 0.4]
Point styling can be configured by passing CSS or style class to the AddPoint method.
Example:
string quadrantChart = Mermaid
.QuadrantChart()
.DefineCssClass("foo", "color: #ff0000", out var foo)
.AddPoint("A", 0.1, 0.2, "radius: 25")
.AddPoint("B", 0.3, 0.4, "radius: 10", foo)
.AddPoint("C", 0.5, 0.6, cssClass: foo)
.Build();The code above generates the following Mermaid code:
quadrantChart
A: [0.1, 0.2] radius: 25
B:::foo: [0.3, 0.4] radius: 10
C:::foo: [0.5, 0.6]
classDef foo color: #ff0000
That renders as:
quadrantChart
A: [0.1, 0.2] radius: 25
B:::foo: [0.3, 0.4] radius: 10
C:::foo: [0.5, 0.6]
classDef foo color: #ff0000