Mermaid 11.15.0
Quadranten ordnen Elemente nach zwei normierten Dimensionen. Nutze Kreisdiagramme für Anteile eines Ganzen und Gantt für Aufgaben mit Terminen.
Mit dem Mermaid-Editor erstellen →Koordinaten reichen von 0 bis 1: X wächst nach rechts, Y nach oben.
quadrantChart
title Redaktionsprioritäten
x-axis Wenig Aufwand --> Hoher Aufwand
y-axis Geringer Nutzen --> Hoher Nutzen
quadrant-1 Planen
quadrant-2 Zuerst erledigen
quadrant-3 Verschieben
quadrant-4 Überdenken
Links korrigieren: [0.2, 0.8]
Anleitung neu schreiben: [0.8, 0.7]
Kosmetische Änderung: [0.6, 0.2]Wird geladen…
| Syntax | Bedeutung |
|---|---|
| quadrantChart / title Text | Deklariert Diagramm und optionalen Titel. |
| x-axis Left --> Right / x-axis Left | Beschriftet beide horizontalen Enden oder nur das linke. |
| y-axis Bottom --> Top / y-axis Bottom | Beschriftet beide vertikalen Enden oder nur das untere. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1: oben rechts; 2: oben links; 3: unten links; 4: unten rechts. |
| Name: [0.25, 0.75] | Normierte x,y-Koordinaten im geschlossenen Bereich 0–1. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Gestaltet Punkte; Randfarbe braucht eine sichtbare Randbreite. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Wiederverwendbare Klassen; direkte Stile übersteuern Klassen und Theme. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Konfiguriert Diagrammgröße, Radius und Textabstand. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Konfiguriert Quadrantenabstand, Texte und Randbreiten. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Konfiguriert Achsen; mit Punkten liegt die horizontale Achse unten. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Konfiguriert Größen und Abstände von Titel und Punkttexten. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Theme-Farben für Quadrantenflächen und Texte. |
| quadrantPointFill / quadrantPointTextFill | Theme-Vorgaben für Punkte, Texte und Ränder. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Theme-Farben für Achsen, Ränder und Titel. |
| %% / accTitle: / accDescr: | Kommentare und zugängliche Beschreibungen. |
Lies Y von unten nach oben. Nummern verlaufen gegen den Uhrzeigersinn ab oben rechts. Eine einzelne Achsenbeschriftung ändert nicht den Bereich.
quadrantChart
title Zwei Dimensionen
x-axis Aufwand
y-axis Nutzen
quadrant-1 Oben rechts
quadrant-2 Oben links
quadrant-3 Unten links
quadrant-4 Unten rechts
Option: [0.3, 0.7]Wird geladen…
Normiere Messungen vor der Eingabe. radius wird in Pixeln gemessen; erkläre die Bedeutung, wenn die Fläche eine dritte Variable darstellt.
quadrantChart
title Ausgewählte Arbeit
x-axis Niedrig --> Hoch
y-axis Niedrig --> Hoch
Entwurf: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Überarbeitung: [0.7, 0.4] radius: 5Wird geladen…
Setze ::: nach dem Namen und vor den Koordinaten. Direkte Stile übersteuern Klassen, Klassen das Theme. Eine Randfarbe allein erzeugt keinen sichtbaren Rand.
quadrantChart
title Prüfkandidaten
x-axis Wenig Aufwand --> Hoher Aufwand
y-axis Geringer Nutzen --> Hoher Nutzen
Links:::focus: [0.2, 0.8]
Neufassung:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxWird geladen…
quadrantChart steuert Geometrie, themeVariables Farben. Vergrößere das Diagramm bei dichten Texten; pointTextPadding verhindert nicht alle Überlappungen.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Geplante Arbeit
x-axis Aufwand
y-axis Nutzen
Anleitung: [0.65, 0.8]Wird geladen…
Wandle 80 vor der Eingabe in 0.8 um.
Ungültige Syntax: Korrektur weiter unten
quadrantChart
Anleitung: [80, 60]quadrantChart
Anleitung: [0.8, 0.6]Wird geladen…
Die erste y-axis-Beschriftung steht unten; quadrant-1 liegt oben rechts.