Example pie chart code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
pie showData
title Where visitors come from
"Organic search" : 48
"Direct" : 22
"Social" : 15
"Referral" : 10
"Email" : 5Pie chart syntax cheat sheet
| Syntax | What it does |
|---|---|
| pie | Start a pie chart. |
| pie showData | Also print the raw values in the legend. |
| title Text | Chart title. |
| "Label" : 42 | One slice. Labels must be quoted; values are positive numbers (decimals allowed). |
| Percentages | Computed automatically from the values; they do not need to sum to 100. |
How to make a Mermaid pie chart
- 1Start the code with pie and an optional title.
- 2Add one slice per line, such as "Mobile" : 62.
- 3Add showData after pie to print raw values in the legend.
- 4Check the live preview.
- 5Export as SVG or PNG, or copy a share link.
Pie chart syntax
Write pie title Traffic by device on the first line, then one slice per line: a quoted label, a colon and a positive number. Mermaid works out the percentages, so the numbers do not need to add up to 100.
Writing pie showData shows the actual values next to the labels in the legend.
When a pie chart works
Pie charts are best for a few parts of one whole, ideally five or fewer slices. Beyond that, slices become hard to compare and a bar chart is clearer.
Group small categories into an "Other" slice and order slices from largest to smallest in your code to make the chart easier to read.