Cirkeldiagram
Toon verhoudingen in één oogopslag
Wat is een Cirkeldiagram?
Een cirkeldiagram laat zien hoe een totaal zich opdeelt in delen: budgetverdeling, marktaandeel, enquêteresultaten, tijdsbesteding. In Mermaid kost het vier regels tekst — perfect voor docs en rapporten.
Cirkeldiagrammen verschijnen in budgetslides, kostenreviews en enquêtesamenvattingen — overal waar één totaal voor een niet-technisch publiek in delen uiteen moet vallen. In Mermaid geschreven is de grafiek vier regels die in het document zelf leven, in plaats van een schermafbeelding uit een spreadsheet die niemand terugvindt. De grens is streng: één totaal, één moment. Perioden vergelijken, of een categorie tonen die te klein is om te zien, vraagt om iets anders.
Live voorbeeld
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Wanneer gebruik je het
Veelgemaakte fouten
Segmentlabels zonder aanhalingstekens
Compute : 42 mislukt: het label moet een string tussen aanhalingstekens zijn, ook als het één woord zonder spaties is. Het is veruit de meest voorkomende reden dat een cirkeldiagram niet wil renderen.
Segmenten worden op grootte gesorteerd
Mermaid tekent de segmenten van groot naar klein, in welke volgorde je ze ook schreef, terwijl de legenda jouw volgorde aanhoudt. Laat de positie van een partje dus nooit betekenis dragen — label het, of accepteer het verschil.
Waarden die al percentages zijn
Mermaid berekent elk aandeel van het totaal zelf. Voer je percentages in die na afronding elders op 98 of 103 uitkomen, dan schaalt hij stilletjes elk segment bij en klopt de grafiek niet meer met de tabel ernaast.
Basissyntaxis
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData zet de ruwe waarde naast elk label in de legenda, naast het percentage dat Mermaid berekent. De titel is optioneel en mag ook op de pie-regel staan.
"Compute" : 42Elk segment is een label tussen aanhalingstekens, een dubbele punt en een getal. Decimalen mogen, en Mermaid rekent de percentages uit, dus de waarden hoeven nergens op uit te komen.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%De kleuren van de segmenten komen uit het thema. Een init-directive op de allereerste regel overschrijft ze één voor één, van pie1 tot pie12, om bij een huisstijl te passen.
%% Q3 figures, source: finance exportTwee procenttekens beginnen een commentaar. Vastleggen waar de cijfers vandaan komen, náást de cijfers, is wat een grafiek zes maanden later nog betrouwbaar maakt.
Vragen over dit diagram
Kan ik de werkelijke waarden in de grafiek tonen?
Ja — voeg showData toe na het sleutelwoord pie en Mermaid toont de waarde naast elk label, naast het percentage.
Hoeveel segmenten mag een cirkeldiagram hebben?
Hooguit vijf tot zeven voor de leesbaarheid. Groepeer kleine categorieën onder “Overig” — je kunt altijd verwijzen naar een gedetailleerde tabel.
Kan ik een Mermaid-cirkeldiagram in een Markdown-rapport zetten?
Ja. GitHub en GitLab renderen cirkeldiagrammen uit een codeblok met de taalaanduiding mermaid, en de getallen blijven in de broncode bewerkbaar. Exporteer voor een pdf of een slide SVG, zodat de labels op elk formaat scherp blijven.
Kan één cirkeldiagram twee perioden vergelijken?
Nee. Mermaid ondersteunt één reeks — geen gegroepeerde segmenten, geen donut, geen tweede ring. Teken twee grafieken naast elkaar, of gebruik een tabel als de lezer waarden moet vergelijken in plaats van verhoudingen te zien.
Hoe verander ik de kleuren van de segmenten?
Zet de themavariabelen pie1 tot en met pie12 in een init-directive op de eerste regel, of wissel van thema. Een segment kan niet vanaf zijn eigen regel gekleurd worden, waardoor het hele palet op één plek gedefinieerd blijft.
Waarom ziet mijn cirkeldiagram er klein uit op de pagina?
De grafiek schaalt mee met de breedte van zijn container, dus in een smalle kolom krimpen de labels mee. Geef hem meer breedte in de pagina, of exporteer een 2×-PNG als de grafiek van een beamer gelezen moet worden.
Cirkeldiagram of een ander diagramtype?
Cirkeldiagram of kwadrantgrafiek?
Een cirkeldiagram is alleen eerlijk als de delen tot één geheel behoren en de lijst volledig is: hetzelfde budget, dezelfde populatie. Zijn je items los van elkaar gemeten, of hield je alleen de interessante over, dan zeggen de percentages die Mermaid afdrukt niets — zet ze op een kwadrantgrafiek.
Cirkeldiagram of Gantt-grafiek?
Beide worden ingezet om de vraag “waar gaat de inspanning heen” te beantwoorden. Een cirkeldiagram verdeelt één totaal op één moment — 40% van het kwartaal aan platformwerk. Een Gantt spreidt datzelfde werk over een kalender. Neem het cirkeldiagram als de verdeling de beslissing is, de Gantt als de volgorde dat is.
Maak nu je Cirkeldiagram
Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.
Mermaid Studio openen