← All diagram types

Mermaid pie chart syntax: slices, titles and percentages with examples

Mermaid pie chart syntax with rendered examples: labelled slices, proportional values, chart titles, and the showData option that puts values in the legend.

A pie chart shows how a whole breaks into parts: revenue by product, traffic by source, tickets by category. Mermaid's pie syntax is the smallest in the language — a title and a list of labelled values — which makes it a good first diagram to put in a document.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Slices

Each slice is a quoted label, a colon, and a number. The numbers are proportional — they do not have to sum to 100, and any positive values work:

mermaid
pie title Renders by source
  "Templates" : 45
  "Markdown" : 30
  "Canvas" : 25
Render this to PDF →How diagram blocks work

title on the first line names the chart; it can also be omitted.

More slices

Slices are drawn clockwise in the order written, largest first only if you write them that way:

mermaid
pie title Support tickets by area
  "Billing" : 34
  "Rendering" : 28
  "API" : 22
  "Other" : 16
Render this to PDF →How diagram blocks work

Values in the legend with showData

pie showData appends each slice's raw value to its legend label — Search (62) instead of Search:

mermaid
pie showData
  title Traffic sources
  "Search" : 62
  "Direct" : 24
  "Referral" : 14
Render this to PDF →How diagram blocks work

Labels are drawn in the legend beside the chart, one row each, and are never shortened — a long label simply widens the diagram. Keep them short so the chart keeps its proportions.

Not supported in makesPDF yet: Mermaid prints each slice's percentage on the slice itself. makesPDF draws those percentage labels only when the chart uses pie showData, and only on slices wider than 15 degrees — narrower slices get no label, and a plain pie gets none at all.