Pie chart
Show proportions at a glance
What is a Pie chart?
A pie chart shows how a total breaks down into parts: budget allocation, market share, survey answers, time distribution. In Mermaid it takes four lines of text — perfect for docs and reports.
Pie charts appear in budget slides, cost reviews and survey summaries — anywhere one total has to be broken into parts for a non-technical audience. Written in Mermaid, the chart is four lines living inside the document instead of a screenshot from a spreadsheet nobody can find again. The limit is strict: one total, one moment. Comparing periods, or showing a category too small to see, needs something else.
Live example
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5When to use it
Common mistakes
Unquoted slice labels
Writing Compute : 42 fails: the label has to be a quoted string, even when it is a single word with no spaces. It is by far the most common reason a pie chart refuses to render.
Slices are reordered by size
Mermaid draws the slices largest first, whatever order you wrote them in, while the legend keeps your order. Never rely on the position of a wedge to carry meaning — label it, or accept the mismatch.
Values that are already percentages
Mermaid computes each share of the total itself. Feeding it percentages that sum to 98 or 103 after rounding elsewhere silently rescales every slice, so the chart stops matching the table printed next to it.
Basic syntax
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData prints the raw value next to each label in the legend, beside the percentage Mermaid computes. The title is optional and can also sit on the pie line.
"Compute" : 42Each slice is a quoted label, a colon and a number. Decimals are allowed, and Mermaid works out the percentages, so the values need not add up to anything in particular.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%Slice colours come from the theme. An init directive on the very first line overrides them one by one, from pie1 up to pie12, to match a brand palette.
%% Q3 figures, source: finance exportTwo percent signs start a comment. Recording where the numbers came from, next to the numbers, is what keeps a chart trustworthy six months later.
Questions about this diagram
Can I show the actual values on the chart?
Yes — add showData after the pie keyword and Mermaid displays the value next to each label, alongside the percentage.
How many slices should a pie chart have?
Five to seven at most for readability. Group small categories into “Other” — you can always link to a detailed table.
Can I put a Mermaid pie chart in a Markdown report?
Yes. GitHub and GitLab render pie charts from a fenced block tagged mermaid, and the numbers stay editable in the source. For a PDF or a slide, export SVG so the labels stay sharp at any size.
Can one pie chart compare two periods?
No. Mermaid supports a single series — no grouped slices, no donut, no second ring. Draw two charts side by side, or use a table when the reader needs to compare values rather than see proportions.
How do I change the colours of the slices?
Set the theme variables pie1 through pie12 in an init directive on the first line, or switch theme entirely. A slice cannot be coloured from its own line, which keeps the whole palette defined in one place.
Why does my pie chart look small on the page?
The chart scales to the width of its container, so a narrow column shrinks the labels with it. Give it more width in the page, or export a 2× PNG when the chart has to be read from a projector.
Pie chart or another diagram type?
Pie chart or quadrant chart?
A pie is only honest when the parts belong to one whole and the list is exhaustive: the same budget, the same population. If your items were measured separately, or you kept only the interesting ones, the percentages Mermaid prints mean nothing — place them on a quadrant instead.
Pie chart or Gantt chart?
Both get used to answer “where is the effort going”. A pie splits a total at one moment — 40% of the quarter on platform work. A Gantt spreads the same work across a calendar. Pick the pie when the split is the decision, the Gantt when the sequence is.
Create your Pie chart now
Describe it in plain language — the AI writes the Mermaid code for you.
Open Mermaid Studio