{"id":2108,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-quadrant-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-quadrant-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-quadrant-syntax-guide\/","title":{"rendered":"Mermaid.js Quadrant Chart Syntax-Leitfaden"},"content":{"rendered":"

Was ist ein Quadranten-Diagramm?<\/h2>\n

Ein Quadranten-Diagramm<\/strong> ist ein strategisches Visualisierungswerkzeug, das verwendet wird, um Gegenst\u00e4nde in vier verschiedene Bereiche basierend auf zwei kontinuierlichen Variablen einzuteilen (z.\u202fB. Aufwand gegen\u00fcber Wirkung oder Wichtigkeit gegen\u00fcber Dringlichkeit). Indem Sie Datenpunkte in eine zweidimensionale Koordinatenebene eintragen, die durch X- und Y-Achsen geteilt ist, k\u00f6nnen Sie klar zwischen hochpriorit\u00e4ren \u201eSchnellsiegen\u201c und niedrigpriorit\u00e4ren \u201eAblenkungen\u201c oder langfristigen \u201estrategischen Wetten\u201c unterscheiden.<\/p>\n

Mit Mermaid.js<\/strong>, k\u00f6nnen Sie Ihre Quadranten, Achsentitel und Positionen der Datenpunkte mithilfe eines einfachen deklarativen Blocks definieren, wodurch Sie professionelle Entscheidungsmatrizen sofort generieren k\u00f6nnen.<\/p>\n

Grundlagen-Syntax-Leitfaden: Elemente und Konstrukte<\/h2>\n

Um ein g\u00fcltiges, vollst\u00e4ndig ausf\u00fchrbares Quadranten-Diagramm in Mermaid zu erstellen, m\u00fcssen Sie das Koordinatensystem, die Achsenbeschriftung und die Platzierung der Datenpunkte beherrschen.<\/p>\n

1. Initialisieren der Quadranten-Leinwand<\/h3>\n

Sie initialisieren eine Quadranten-Diagramm-Leinwand in Zeile eins mit dem quadrantChart<\/code>Schl\u00fcsselwort. Anschlie\u00dfend definieren Sie die Beschriftungen f\u00fcr Ihre vier Quadranten sowie die Titel f\u00fcr Ihre X- und Y-Achsen.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
quadrantChart\r\n    title Projekt-Priorisierungs-Matrix\r\n    x-Achse \"Niedriger Aufwand\" --> \"Hoher Aufwand\"\r\n    y-Achse \"Niedriger Einfluss\" --> \"Hoher Einfluss\"\r\n    quadrant-1 \"Strategische Wetten\"\r\n    quadrant-2 \"Schnellsiege\"\r\n    quadrant-3 \"Ablenkungen\"\r\n    quadrant-4 \"Gro\u00dfe Projekte\"<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Platzieren von Datenpunkten<\/h3>\n
Sie f\u00fcgen Gegenst\u00e4nde dem Diagramm hinzu, indem Sie ihren Anzeigennamen sowie ihre X- und Y-Koordinaten (normiert zwischen 0 und 1) angeben.<\/p>\n