Zum Hauptinhalt springen

Mermaid 11.15.0

Mermaid Kreisdiagramm: Spickzettel

Kreisdiagramme vergleichen wenige positive Anteile eines Ganzen. Nutze Balken bei vielen Kategorien oder ähnlichen Werten und Quadranten für zwei Dimensionen.

Mit dem Kreisdiagramm-Generator erstellen →

Schnellstart

Werte sind Gewichte und müssen nicht 100 ergeben; Mermaid berechnet die Anteile.

Mermaid
Im Editor öffnen → 
pie showData
  title Dokumentationsaufwand
  "Redaktion" : 48
  "Prüfung" : 32
  "Veröffentlichung" : 20

Wird geladen…

Syntaxreferenz

Syntaxreferenz
SyntaxBedeutung
pie / pie showDataDeklariert das Diagramm; showData ergänzt Werte in der Legende.
title TextFügt einen optionalen Titel hinzu.
"Label" : 12.75Beschriftungen in Anführungszeichen und positive Gewichte; dokumentiert sind zwei Dezimalstellen.
config.pie.textPosition: 0.75Radiale Position: 0 ist die Mitte, 1 der Rand.
themeVariables.pieOuterStrokeWidth: "2px"Breite des äußeren Randes.
themeVariables.pie1…pie12Segmentfarben mit theme base.
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorTheme-Variablen für Titel und Segmenttexte.
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacityTheme-Variablen für Legende, Ränder und Deckkraft.
%% / accTitle: / accDescr:Kommentare und zugängliche Beschreibungen.

Dezimalwerte und Anteile

Nutze positive Gewichte und einen Dezimalpunkt auch in Sprachen mit Dezimalkomma. showData zeigt Originalwerte; Prozentangaben werden auf ganze Zahlen gerundet. Mermaid 11.15 blendet Segmente unter 1% aus, behält ihre Legendeneinträge aber bei.

Mermaid
Im Editor öffnen → 
pie showData
  title Bearbeitungsstunden
  "Entwerfen" : 12.75
  "Faktenprüfung" : 6.25
  "Korrektur" : 3.50

Wird geladen…

Texte und Legende

Halte Namen kurz. Ohne showData stehen nur Namen in der Legende; Segmente zeigen weiter Anteile. Vermeide winzige Kategorien.

Mermaid
Im Editor öffnen → 
pie
  title Prüfergebnisse
  "Angenommen" : 18
  "Überarbeitet" : 7
  "Verschoben" : 3

Wird geladen…

Textposition

textPosition ist ein radialer Anteil. Kleinere Werte verschieben Text zur Mitte; bei Überlappungen solltest du Daten vereinfachen.

Mermaid
Im Editor öffnen → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title Prüfaufteilung
  "Technisch" : 60
  "Redaktionell" : 40

Wird geladen…

Farben und Außenrand

Nutze theme base und pie1…pie12. pieOuterStrokeWidth erwartet eine CSS-Länge; passe Text- und Randkontrast dem Hintergrund an.

Mermaid
Im Editor öffnen → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title Arbeitsverteilung
  "Recherche" : 45
  "Redaktion" : 35
  "Prüfung" : 20

Wird geladen…

Häufige Fehler

Negative Gewichte verwenden

Negative Werte werden abgelehnt. Nutze positive Gewichte und andere Diagramme für Nettoverluste.

Ungültige Syntax: Korrektur weiter unten

pie
  "Prüfung" : -2

Dezimalkomma verwenden

Schreibe 12.75 statt 12,75 und runde auf die dokumentierten zwei Dezimalstellen.

Einschränkungen

  • Nutze positive Gewichte für sichtbare Segmente. Null wird akzeptiert, zeichnet aber kein Segment; negative Werte werden abgelehnt.
  • Für Originalwerte sind zwei Dezimalstellen dokumentiert; Prozentangaben werden auf ganze Zahlen gerundet. Segmente unter 1% werden ausgeblendet.
  • Viele Kategorien und ähnliche Werte sind als Balken leichter vergleichbar.

Häufig gestellte Fragen

Müssen Werte zusammen 100 ergeben?
Nein: jedes positive Gewicht wird durch die Gesamtsumme geteilt.
Was verändert showData?
Es ergänzt Originalwerte in der Legende, ohne die Geometrie zu ändern.
Wie ändere ich Segmentfarben?
Setze theme base und pie1…pie12 in themeVariables.