piev0.9.4
What is a Pie diagram?
Proportional breakdowns at a glance.
pie
When to use it
Use a Pie when…
01
One-glance proportional comparisons
02
Survey results, share-of-voice
03
Quick stats in a slide
Syntax basics
The minimal syntax
Copy this and you have a working pie. Build from here.
pie.mmd
pie title Browser share (Apr 2026) class="code-str">"Chrome" : 46 class="code-str">"Safari" : 22 class="code-str">"Firefox" : 18 class="code-str">"Other" : 14
Common patterns
Patterns worth memorizing
Implicit percentages
Values can be raw counts — Mermaid normalizes to percentages automatically.
Show data
Add `showData` after `pie` (e.g. `pie showData`) to print values next to slices.
Order matters
Slices render in declared order, clockwise from 12 — put the largest first.
Common gotchas
The things that will trip you up
Mermaid silently ignores misspellings — these are the failures we see most.
- 01
No legend customization beyond label text.
- 02
Pie charts with > 6 slices read poorly; split or use a bar chart elsewhere.
- 03
Labels can't contain `:` — Mermaid uses it as the value separator.
Related diagram types