MermanDraw
Open Editor

Mermaid guide

Mermaid Pie Chart Syntax: Slices, Labels, and Showing Values

The pie chart is the simplest Mermaid diagram: a title and a list of "label" : value lines. Values are absolute, so you can paste raw counts and let Mermaid work out the percentages.

Use it for a quick proportion in a status update or README. For anything with more than six or seven slices, an XY bar chart reads better.

  • proportion summaries
  • survey results
  • budget breakdowns
  • lightweight analytics

Example

Mermaid Pie Chart example48%22%18%12%MermanDraw Users by TypeFlowchartSequenceER / ClassOthers
pie title MermanDraw Users by Type
    "Flowchart" : 48
    "Sequence" : 22
    "ER / Class" : 18
    "Others" : 12
Open in editor → Cheatsheet →

Syntax

Basic chart

pie showData
    title Traffic by source
    "Organic search" : 412
    "Direct" : 190
    "Referral" : 88
    "Social" : 54
Basic chart — Mermaid pie55%26%12%7%Traffic by sourceOrganic search [412]Direct [190]Referral [88]Social [54]

showData after pie prints the raw value next to each percentage. Labels must be quoted; values can be decimals.

Try this snippet →

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

  • Unquoted labels (Organic : 412).

    Fix: Wrap every label in double quotes.

  • Percent signs in values ("A" : 40%).

    Fix: Write plain numbers. Mermaid computes percentages itself.

  • A title line before pie.

    Fix: pie must be the first token. Put title on the next line (or on the same line after pie).

Real-world examples

Complete, copy-ready pie charts for common situations. Each one opens in the editor with a click.

Browse all examples →

FAQ

Can I change slice colours?

Through theme variables pie1 to pie12, which MermanDraw's themes set for you. Inline per-slice colours are not supported in the diagram text.

Can I make a donut chart?

No. Mermaid pies are full circles. For a donut, export the SVG and edit it, or use an XY chart.