TryMermaid

Mermaid Pie Chart Maker

Write pie charts in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Pie chart example

Rendering preview…

pie title Where the marketing budget went
    "Paid search" : 42
    "Content" : 27
    "Events" : 19
    "Everything else" : 12
Open this example in the editor Start a blank diagram

What is a pie chart?

A pie chart is a circle split into slices, where each slice shows one part of a whole and the size of the slice shows how big that part is. In Mermaid you write a pie chart as text: a title, then one line per slice with its label and value. Mermaid works out the percentages for you.

When to use a pie chart

  • Budget and spend breakdowns
  • Traffic or revenue by channel
  • Survey results
  • Any share-of-total figure in a report or slide

How to make a pie chart in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with pie on the first line.

  2. Step 2

    Name the chart

    Add a title after the pie keyword, such as pie title Where the budget went.

  3. Step 3

    Add the slices

    Write one line per slice as a quoted label, a colon and a number, such as "Paid search" : 42. Mermaid turns the numbers into percentages.

  4. Step 4

    Export or share

    Check the live preview, then export the chart as PNG or SVG or copy a share link.

Pie chart syntax cheat sheet

ElementSyntaxWhat it does
StartpieBegins a pie chart
Titlepie title Budget splitHeading above the chart
Slice"Paid search" : 42One labelled value
Show valuespie showData title BudgetPrints each value in the legend
Decimals"Referrals" : 12.5Values can be fractional

Pie chart FAQ

Do the values in a Mermaid pie chart have to add up to 100?

No. Give each slice its raw value and Mermaid converts it to a percentage of the total. Writing 42 and 27 produces the same chart as writing the equivalent percentages.

How do I show the numbers on a Mermaid pie chart?

Add showData after the pie keyword, as in pie showData title Budget. Mermaid then prints each slice value next to its label in the legend.

Can I change the colors of the slices?

Slice colors come from the diagram theme. Change theme in the front matter, for example to forest or dark, and the palette changes with it.

Other Mermaid diagram types