Mermaid Pie Chart Syntax

What a Mermaid pie chart is for

A pie chart shows parts of a whole. Mermaid sizes the slices from the values you give and works out the percentages, so you can paste raw counts.

Pie Chart syntax

Basic example

pie title Traffic sources
    "Organic search" : 58.4
    "Direct" : 21.2
    "Referral" : 12.7
    "Social" : 7.7

Open this example in the Mermaid editor

More pie chart examples

Raw counts with values shown

Values don’t need to add up to 100; showData prints them in the legend.

pie showData title Bug reports by platform
    "Windows" : 412
    "macOS" : 236
    "Linux" : 98
    "Mobile" : 154

Open “Raw counts with values shown” in the editor

Common mistakes

• Labels must be in double quotes.
• Slices are drawn in the order written; sort them largest first for an easier read.
• Slices under 1% of the total are left out of the chart (they stay in the legend), so group tiny values into “Other”.

Use it in Markdown

```mermaid
pie title Traffic sources
    "Organic search" : 58.4
    "Direct" : 21.2
    "Referral" : 12.7
    "Social" : 7.7
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Pie Chart

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions