Wie schreibe ich ein Mermaid-Tortendiagramm?

Beginnen Sie in der ersten Zeile mit `pie title Ihr Titel` und listen Sie dann jeden Sektor als `"Beschriftung" : Wert` in separaten Zeilen auf. Werte können jede positive Zahl sein – Mermaid wandelt sie automatisch in Prozentsätze um. Beispiel: `pie title Browseranteil \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`. Sie müssen nicht sicherstellen, dass die Werte sich zu 100 summieren.

Kann ich die Farbe jedes Sektors steuern?

Mermaid-Tortendiagramme verwenden eine automatisch zugewiesene Farbpalette, die auf dem Diagrammthema basiert. Sie können Farben nicht direkt pro Sektor in der Diagrammsyntax angeben. Um Farben anzupassen, müssten Sie ein benutzerdefiniertes Mermaid-Thema anwenden oder die SVG-Ausgabe nachbearbeiten. Für Präsentationen, die spezifische Markenfarben erfordern, ist die Bearbeitung der exportierten SVG in einem Vektoreditor wie Figma oder Inkscape der praktischste Ansatz.

Gibt es eine maximale Anzahl von Sektoren für ein Mermaid-Tortendiagramm?

Es gibt keine harte Grenze, aber Tortendiagramme werden ab 7-8 Sektoren schwer lesbar, da die Segmente zu schmal werden, um sie klar zu beschriften. Best Practice ist, kleine Kategorien in einem 'Sonstige'-Behälter zu gruppieren, wenn ein einzelner Sektor weniger als 3-5 % des Gesamten darstellt. Mermaid versucht, eine beliebige Anzahl von Sektoren zu rendern, aber die Lesbarkeit nimmt bei über 10 Sektoren erheblich ab.

Wann sollte ich ein Tortendiagramm anstelle eines Gantt-Diagramms oder einer Zeitachse verwenden?

Verwenden Sie ein Tortendiagramm, wenn Sie Teil-Ganzes-Beziehungen für einen einzelnen Zeitpunkt anzeigen möchten – Proportionen, Verteilungen, Anteile. Verwenden Sie ein Gantt-Diagramm, wenn Sie Aufgaben, Dauern und Zeitpläne über eine Zeitachse anzeigen müssen. Verwenden Sie eine Zeitachse, wenn Sie bestimmte Ereignisse in chronologischer Reihenfolge markieren möchten. Tortendiagramme beantworten die Frage „Wie viel vom Ganzen?“; Gantt- und Zeitliniendiagramme beantworten die Frage „Wann?“.

Mermaid Tortendiagramm-Viewer

Erstellen Sie Mermaid-Tortendiagramme sofort in Ihrem Browser. Visualisieren Sie proportionale Daten und exportieren Sie als SVG oder PNG. Kostenloses Online-Tool.

Mermaid-Code

Vorschau

Geben Sie Mermaid-Code ein, um Ihr Diagramm in der Vorschau anzuzeigen

Tortendiagramme kommunizieren proportionale Verteilungen auf einen Blick – Marktanteile, Budgetzuweisungen, Traffic-Quellen, Funktionsnutzung oder Umfrageergebnisse. Die `pie`-Syntax von Mermaid ist die einfachste aller Mermaid-Diagrammtypen: nur ein Titel und eine Liste von Beschriftungs-Wert-Paaren. Diese Einfachheit macht Tortendiagramme zu einer häufigen Ausgabe von KI-Assistenten, wenn Benutzer nach einer schnellen Visualisierung von Daten fragen. Wenn Produktmanager Claude oder ChatGPT fragen: „Zeigen Sie mir eine Aufschlüsselung unserer Nutzerakquisitionskanäle“ oder Entwickler fragen: „Visualisieren Sie die Verteilung der HTTP-Fehlercodes in unseren API-Protokollen“, erhalten sie oft ein Mermaid-Tortendiagramm. Zolkit rendert das Diagramm sofort, sodass Sie die Beschriftungen, Proportionen und den Gesamteindruck überprüfen können, bevor Sie es für einen Bericht oder eine Präsentation exportieren. Mermaid-Tortendiagramme berechnen automatisch Prozentsätze aus den Rohwerten und beschriften jeden Sektor entsprechend. Der Viewer exportiert gestochen scharfe SVG-Dateien für die Web-Einbettung oder 2× PNG-Dateien für die Aufnahme in Dias, Word-Dokumente und E-Mail-Berichte. Für komplexere Datenvisualisierungsanforderungen sollten Sie Tortendiagramme mit Gantt-Diagrammen (für Zeitachsenverteilung) oder Zeitliniendiagrammen kombinieren.

Kostenloser Online Mermaid Diagramm-Viewer und Exporter

Der Mermaid Diagramm-Viewer von Zolkit ermöglicht es Ihnen, beliebigen Mermaid-Code einzufügen und sofort ein gerendertes Diagramm anzuzeigen – keine Installation, keine Anmeldung, kein Hochladen auf Server. Alles läuft in Ihrem Browser, was ihn zur schnellsten Methode macht, um KI-generierte Diagramme von Claude, ChatGPT oder Gemini zu überprüfen. Unterstützt alle gängigen Mermaid-Diagrammtypen: Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Zustandsdiagramme, Mindmaps, Git-Graphen, Tortendiagramme und Zeitachsen.

Sofortige Live-Vorschau

Diagramme werden automatisch während der Eingabe gerendert, mit einer Verzögerung von 300 ms, sodass es sich nie träge anfühlt.

100% privat

Das gesamte Rendering findet in Ihrem Browser mit mermaid.js statt. Ihr Code wird niemals an einen Server gesendet.

SVG & PNG Export

Laden Sie Ihr Diagramm als scharfes Vektor-SVG oder als hochauflösendes 2× PNG herunter, bereit für Dokumente und Präsentationen.

Alle Mermaid Diagrammtypen

Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Mindmaps, Git-Graphen und mehr.

Bereit für KI-Diagramme

Gebaut für das KI-Zeitalter – Vorschau von Diagrammen, die von Claude, ChatGPT, Gemini oder jedem LLM generiert wurden.

Immer kostenlos

Kein Konto erforderlich, keine Nutzungslimits, keine Wasserzeichen. Zolkit's Mermaid-Viewer ist für immer komplett kostenlos.

So zeigen Sie ein Mermaid-Diagramm in der Vorschau an

1
Fügen Sie Ihren Mermaid-Code in den Editor auf der linken Seite ein – Sie können ihn von einem KI-Assistenten kopieren oder manuell schreiben.
2
Das Diagramm wird sofort im Vorschaufenster auf der rechten Seite gerendert. Bei einem Syntaxfehler erklärt eine Meldung das Problem.
3
Klicken Sie auf 'SVG exportieren' oder 'PNG exportieren', um Ihr Diagramm als Datei herunterzuladen, die für Dokumentationen, Präsentationen oder zum Teilen bereit ist.