Mermaid.js Quadrant Chart Syntax-Leitfaden

Was ist ein Quadranten-Diagramm?

Ein Quadranten-Diagramm ist ein strategisches Visualisierungswerkzeug, das verwendet wird, um Gegenstände in vier verschiedene Bereiche basierend auf zwei kontinuierlichen Variablen einzuteilen (z. B. Aufwand gegenüber Wirkung oder Wichtigkeit gegenüber Dringlichkeit). Indem Sie Datenpunkte in eine zweidimensionale Koordinatenebene eintragen, die durch X- und Y-Achsen geteilt ist, können Sie klar zwischen hochprioritären „Schnellsiegen“ und niedrigprioritären „Ablenkungen“ oder langfristigen „strategischen Wetten“ unterscheiden.

Mit Mermaid.js, können Sie Ihre Quadranten, Achsentitel und Positionen der Datenpunkte mithilfe eines einfachen deklarativen Blocks definieren, wodurch Sie professionelle Entscheidungsmatrizen sofort generieren können.

Grundlagen-Syntax-Leitfaden: Elemente und Konstrukte

Um ein gültiges, vollständig ausführbares Quadranten-Diagramm in Mermaid zu erstellen, müssen Sie das Koordinatensystem, die Achsenbeschriftung und die Platzierung der Datenpunkte beherrschen.

1. Initialisieren der Quadranten-Leinwand

Sie initialisieren eine Quadranten-Diagramm-Leinwand in Zeile eins mit dem quadrantChartSchlüsselwort. Anschließend definieren Sie die Beschriftungen für Ihre vier Quadranten sowie die Titel für Ihre X- und Y-Achsen.

quadrantChart
    title Projekt-Priorisierungs-Matrix
    x-Achse "Niedriger Aufwand" --> "Hoher Aufwand"
    y-Achse "Niedriger Einfluss" --> "Hoher Einfluss"
    quadrant-1 "Strategische Wetten"
    quadrant-2 "Schnellsiege"
    quadrant-3 "Ablenkungen"
    quadrant-4 "Große Projekte"

2. Platzieren von Datenpunkten

Sie fügen Gegenstände dem Diagramm hinzu, indem Sie ihren Anzeigennamen sowie ihre X- und Y-Koordinaten (normiert zwischen 0 und 1) angeben.

• 0.0 ist der Start der Achse.
• 1.0 ist das Ende der Achse.

quadrantChart
    title Einfluss gegenüber Aufwand-Matrix
    x-Achse "Niedriger Aufwand" --> "Hoher Aufwand"
    y-Achse "Niedriger Einfluss" --> "Hoher Einfluss"
    quadrant-1 "Strategische Wetten"
    quadrant-2 "Schnellsiege"
    quadrant-3 "Ablenkungen"
    quadrant-4 "Große Projekte"
    "Aufgabe A": [0.2, 0.8]
    "Aufgabe B": [0.7, 0.2]

Best Practices für die Matrix-Zuordnung

• Normalisieren Sie Ihre Daten: Da Mermaid-Koordinaten im Bereich von 0,0 bis 1,0 skaliert sind, skalieren Sie Ihre Rohdatenwerte in diesen Prozentbereich um, bevor Sie sie in das Skript eingeben.
• Klare Achsenbeschriftungen: Fügen Sie immer beschreibende Achsenbeschriftungen hinzu, die explizit definieren, was die X- und Y-Achsen darstellen (z. B. „Kosten“ gegenüber „ROI“). Eine Matrix ohne definierte Achsen ist nur ein zufälliger Streudiagramm.
• Grenze die Punkt-Dichte: Wenn Sie mehr als 15–20 Punkte auf einem einzelnen Viertel-Diagramm haben, wird es überladen und schwer lesbar. Bei größeren Datensätzen sollten Sie erwägen, sie in mehrere thematische Diagramme aufzuteilen.

Beispiele für echte Mermaid.js-Vierteldiagramme

Beispiel: Produktmerkmal-Priorisierungsmatrix

Dieser funktionale Bauplan unterstützt Produktteams dabei, Merkmale basierend auf ihrem Entwicklungs-Aufwand und potenziellen geschäftlichen Auswirkungen zu kategorisieren.

quadrantChart
    Titel Produktmerkmal-Priorisierung
    x-Achse "Geringer Aufwand" --> "Hoher Aufwand"
    y-Achse "Geringer Einfluss" --> "Hoher Einfluss"
    Viertel-1 "Langfristige Einsätze"
    Viertel-2 "Schnelle Erfolge"
    Viertel-3 "Niedrige Priorität"
    Viertel-4 "Große Initiativen"
    "Login-API": [0,1, 0,9]
    "Themen-Anpasser": [0,8, 0,3]
    "Zahlungs-Gateway": [0,6, 0,8]
    "Dunkler Modus": [0,2, 0,2]

Syntax-Aufschlüsselung: Indem wir `[0,1, 0,9]` der „Login-API“ zuweisen, platzieren wir sie im linken oberen Viertel (hoher Einfluss, geringer Aufwand) und kennzeichnen sie als „Schnellen Erfolg“. Dies ermöglicht es den Stakeholdern, die Prioritäten des Entwicklungsroadmaps sofort visuell zu erfassen.