Kreisdiagramm
Zeigen Sie Proportionen auf einen Blick
Was ist ein Kreisdiagramm?
Ein Kreisdiagramm zeigt, wie sich ein Ganzes in Teile aufteilt: Budgetverteilung, Marktanteile, Umfrageergebnisse, Zeitverteilung. In Mermaid genügen vier Zeilen Text — perfekt für Dokumentation und Berichte.
Kreisdiagramme erscheinen in Budgetfolien, Kostenreviews und Umfragezusammenfassungen — überall dort, wo eine Summe für ein nicht technisches Publikum in Teile zerlegt werden muss. In Mermaid geschrieben, sind es vier Zeilen im Dokument selbst statt eines Screenshots aus einer Tabelle, die niemand wiederfindet. Die Grenze ist streng: eine Summe, ein Zeitpunkt. Wer Perioden vergleichen oder eine zu kleine Kategorie zeigen will, braucht etwas anderes.
Live-Beispiel
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Wann einsetzen
Häufige Fehler
Beschriftungen ohne Anführungszeichen
Compute : 42 schlägt fehl: Die Beschriftung muss eine Zeichenkette in Anführungszeichen sein, auch wenn sie aus einem einzigen Wort ohne Leerzeichen besteht. Das ist mit Abstand der häufigste Grund, warum ein Kreisdiagramm nicht rendert.
Segmente werden nach Größe sortiert
Mermaid zeichnet die Segmente vom größten zum kleinsten, unabhängig von Ihrer Reihenfolge, während die Legende Ihre Reihenfolge behält. Verlassen Sie sich nie darauf, dass die Position eines Segments etwas bedeutet — beschriften Sie es, oder nehmen Sie die Abweichung in Kauf.
Werte, die schon Prozente sind
Mermaid berechnet jeden Anteil an der Summe selbst. Füttern Sie es mit Prozenten, die sich nach anderweitiger Rundung auf 98 oder 103 addieren, skaliert es alle Segmente still um, und das Diagramm passt nicht mehr zur Tabelle daneben.
Grundlegende Syntax
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData schreibt den Rohwert neben jede Beschriftung in der Legende, zusätzlich zu dem von Mermaid berechneten Prozentsatz. Der Titel ist optional und kann auch auf der pie-Zeile stehen.
"Compute" : 42Jedes Segment besteht aus einer Beschriftung in Anführungszeichen, einem Doppelpunkt und einer Zahl. Dezimalzahlen sind erlaubt, und da Mermaid die Prozentsätze selbst berechnet, müssen die Werte keine bestimmte Summe ergeben.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%Die Segmentfarben stammen aus dem Theme. Eine init-Direktive in der allerersten Zeile überschreibt sie einzeln, von pie1 bis pie12, passend zu einer Markenpalette.
%% Q3 figures, source: finance exportZwei Prozentzeichen leiten einen Kommentar ein. Direkt neben den Zahlen festzuhalten, woher sie stammen, ist das, was ein Diagramm auch nach sechs Monaten noch vertrauenswürdig macht.
Fragen zu diesem Diagramm
Kann ich die tatsächlichen Werte im Diagramm anzeigen?
Ja — fügen Sie showData nach dem Schlüsselwort pie hinzu, und Mermaid zeigt den Wert neben jeder Beschriftung an, zusätzlich zum Prozentsatz.
Wie viele Segmente sollte ein Kreisdiagramm haben?
Höchstens fünf bis sieben für gute Lesbarkeit. Fassen Sie kleine Kategorien unter „Sonstige“ zusammen — Sie können jederzeit auf eine detaillierte Tabelle verweisen.
Kann ich ein Mermaid-Kreisdiagramm in einen Markdown-Bericht einbauen?
Ja. GitHub und GitLab rendern Kreisdiagramme aus einem Codeblock mit der Auszeichnung mermaid, und die Zahlen bleiben im Quelltext bearbeitbar. Für ein PDF oder eine Folie exportieren Sie SVG, damit die Beschriftungen in jeder Größe scharf bleiben.
Kann ein Kreisdiagramm zwei Perioden vergleichen?
Nein. Mermaid unterstützt nur eine Datenreihe — keine gruppierten Segmente, kein Donut, kein zweiter Ring. Zeichnen Sie zwei Diagramme nebeneinander oder nehmen Sie eine Tabelle, wenn der Leser Werte vergleichen soll statt Proportionen zu sehen.
Wie ändere ich die Farben der Segmente?
Setzen Sie in einer init-Direktive in der ersten Zeile die Theme-Variablen pie1 bis pie12 oder wechseln Sie gleich das Theme. Ein Segment lässt sich nicht aus seiner eigenen Zeile heraus einfärben — die ganze Palette bleibt an einer Stelle definiert.
Warum wirkt mein Kreisdiagramm auf der Seite so klein?
Das Diagramm skaliert auf die Breite seines Containers, in einer schmalen Spalte schrumpfen deshalb auch die Beschriftungen. Geben Sie ihm mehr Breite auf der Seite oder exportieren Sie ein 2×-PNG, wenn es vom Beamer aus lesbar sein muss.
Kreisdiagramm oder ein anderer Diagrammtyp?
Kreisdiagramm oder Quadrantendiagramm?
Ein Kreisdiagramm ist nur dann ehrlich, wenn die Teile zu einem Ganzen gehören und die Liste vollständig ist: dasselbe Budget, dieselbe Grundgesamtheit. Wurden Ihre Elemente getrennt gemessen oder haben Sie nur die interessanten behalten, bedeuten die von Mermaid ausgegebenen Prozentsätze nichts — setzen Sie sie stattdessen in ein Quadrantendiagramm.
Kreisdiagramm oder Gantt-Diagramm?
Beide beantworten die Frage „wohin fließt der Aufwand“. Ein Kreisdiagramm teilt eine Summe zu einem Zeitpunkt auf — 40 % des Quartals in Plattformarbeit. Ein Gantt-Diagramm verteilt dieselbe Arbeit über einen Kalender. Nehmen Sie das Kreisdiagramm, wenn die Aufteilung die Entscheidung ist, das Gantt, wenn es die Reihenfolge ist.
Erstellen Sie jetzt Ihr Kreisdiagramm
Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.
Mermaid Studio öffnen