Mermaid pie charts
A Mermaid pie chart turns a few labelled values into a chart with one line of text each — Mermaid computes the percentages and draws the legend. It's the quickest way to drop a simple breakdown into a README or report.
A traffic-source breakdown — values become percentages automatically.
Pie charts are deliberately minimal in Mermaid: a title, labels, and values. For anything more analytical you'll want a charting library; for 'show the split at a glance' this is exactly enough.
When to use a pie chart
- Traffic, budget, or cost breakdowns in reports
- Survey result summaries
- Storage or resource usage splits
- Quick composition snapshots in docs
The Mermaid code
Copy it anywhere Mermaid renders — or see the full syntax reference.
pie title Traffic sources
"Organic search" : 52
"Direct" : 28
"Referral" : 12
"Social" : 8Frequently asked questions
- How do I create a pie chart in Mermaid?
- Start with `pie` (optionally `pie title Your title`), then write one quoted label and a numeric value per line: `"Organic" : 52`. Mermaid sums the values and renders each slice as a percentage of the total — the values don't need to add up to 100.
- Can I show the actual values instead of percentages?
- Add `showData` after `pie` (`pie showData title Budget`) and Mermaid prints the raw value next to each legend entry alongside the percentage.
- How do I export a Mermaid pie chart as an image?
- Open it in MermaidCreator (or paste it into the free Mermaid-to-PNG converter) and download PNG or SVG. The export embeds fonts, so labels render exactly as previewed.