Guide

How to Create Pie Charts with Mermaid

Pie charts in Mermaid are one of the simplest diagram types to write — just a title and key-value pairs. Perfect for quickly visualizing data distributions without complex setup.

1. Basic Syntax

A Mermaid pie chart starts with the pie keyword, followed by a title and data sections:

Example Code

pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 20
    "Firefox" : 8
    "Edge" : 7

2. Understanding Values

Values are relative — Mermaid automatically converts them to percentages. You can use any numeric scale:

"Sales" : 450Whole numbers work fine

"Revenue" : 12500.50Decimals are supported

"Users" : 1.5Small numbers get converted (1.5% ≈ not visible)

"A" : 50 "B" : 50Equal values = equal slices (50% each)

3. Real-World Examples

Website Traffic Sources

pie title Website Traffic Sources
    "Organic Search" : 4200
    "Social Media" : 2800
    "Direct" : 1500
    "Referral" : 980
    "Email" : 520

Project Budget Allocation

pie title Q1 Budget Allocation
    "Engineering" : 45000
    "Marketing" : 20000
    "Operations" : 15000
    "Design" : 10000
    "Legal" : 5000
    "Other" : 5000

Time Distribution

pie title Weekly Time Distribution
    "Deep Work" : 35
    "Meetings" : 25
    "Email" : 15
    "Admin" : 10
    "Learning" : 8
    "Breaks" : 7

4. Custom Colors

Override default colors using theme variables or Mermaid's color keywords:

Example Code

%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#cdb4db', 'pie2': '#ffc8dd', 'pie3': '#bde0fe', 'pie4': '#a2d2ff' }}}%%
pie title Pastel Theme Chart
    "Design" : 35
    "Engineering" : 45
    "Marketing" : 12
    "Admin" : 8

Available color variables:

pie1pie2pie3pie4pie5pie6pie7pie8pie9pie10pie11pie12

5. When to Use Pie Charts

Pie charts work best for showing parts of a whole. Know when to use them — and when a bar chart is better:

✅ Good use cases

·Showing 2-5 categories clearly
·Emphasizing a single dominant category
·Showing simple proportions (e.g., 60/40 split)
·Non-technical audience / presentation slides

❌ Avoid pie charts when

·More than 6 categories (slices become unreadable)
·Values are very similar (hard to tell differences)
·You need precise comparisons — use a bar chart
·Showing trends over time — use a line chart

Pro Tips

→Limit to 5-6 slices maximum — more makes the chart unreadable
→Start your largest segment at 12 o'clock and go clockwise
→Use "Other" to group small categories into a single slice
→Order slices by size (largest first) for easier reading
→For pastel colors, set theme to 'base' and override pie1-pie12 variables
→Mermaid pie charts export cleanly to SVG, PNG, and PDF — great for docs

Start creating pie charts now

No signup required. Just open mermaid.bkkdev.io and start typing.

Open Mermaid Viewer →