Learn

Pie chart syntax

Learn titles, quoted slice labels, numeric values, and showData used in the Traffic sources template.

On this page6 sections

Syntax cheatsheet

Quick reference for this diagram type

Concept	Syntax
Declare	pie · pie showData
Title	title Traffic sources
Slice	"Organic search" : 42
Values	Relative shares (need not sum to 100)

Begin with pie so Mermaid knows you want a pie chart. Add an optional title on the same line or the next line.

Pie charts are Preview-only in SayDiagram — use Present to reveal slices one by one.

pie title Share
  "A" : 40
  "B" : 30
  "C" : 30

Expand

Each slice is a quoted label, a colon, and a number. Values are relative weights — they do not have to add up to 100.

Quote labels that contain spaces so Mermaid parses them correctly.

pie title Pets adopted
  "Dogs" : 45
  "Cats" : 30
  "Birds" : 25

Expand

Use pie showData to print the numeric value next to each slice in Preview.

You can still set a title after showData.

Tip: showData is optional — omit it for a cleaner chart when labels alone are enough.

pie showData
  title Budget mix
  "Engineering" : 50
  "Design" : 20
  "Marketing" : 30

Expand

Combine a title with several quoted slices for a readable channel mix — the same pattern as the Examples gallery template.

Tip: In Present mode, each step adds the next slice so you can walk through the mix live.

pie title Traffic sources
  "Organic search" : 42
  "Paid ads" : 28
  "Social" : 18
  "Referral" : 12

Expand

80% or higher certifies this lesson. You'll get 3–5 random questions from a larger bank.