Mermaid pie chart examples

How do you put a Mermaid pie chart in markdown?

Wrap the code in a fenced block tagged mermaid, three backticks and the word mermaid on the first line and three backticks on the last; the copy buttons above include the fence. GitHub, GitLab, Obsidian and Notion render the block as a chart, and so does Docs MD: paste it into the editor and the shared link shows the rendered pie, not the code.

Where a platform does not render Mermaid, readers see the code, which is still legible: the labels and values are right there. To ship a picture instead, export the rendered chart to an image or convert the document to PDF, which draws the diagrams first.

Why is my Mermaid pie chart not rendering?

Check four things in order. Labels must be in straight double quotes ("Label", not curly quotes pasted from a word processor). Each slice needs a colon between the label and the value. Values must be positive: Mermaid’s documentation says zero and negative numbers are an error. And the renderer must be new enough for what you used: donutHole, legendPosition and highlightSlice arrived in Mermaid 11.16.0, so a platform that ships an older Mermaid renders a plain pie or fails on the config.

A label that contains a double quote breaks the line; reword it or use single quotes inside the label text. If the chart renders but the slices look wrong, check the order: slices are drawn clockwise in the order of the lines, not sorted by size.

Which configuration options does a Mermaid pie chart have?

These are the pie-specific options from Mermaid’s documentation. Set them in a config block at the top of the diagram, as in the donut and legend examples.

When is a pie chart the wrong choice?

Pie charts show parts of one whole. They stop working when there are more than about six slices, when slices are close in size, or when the numbers are not parts of a total (two separate measurements, or values over time). For a ranked comparison a bar chart reads faster, and for change over time Mermaid’s timeline or a Gantt chart fits better. If a slice would be a sliver, group the small ones into “Other”, as the cloud-bill example does.

Do Mermaid pie chart values have to add up to 100?

No. Mermaid adds up all the values and draws each slice as its share of the total, so raw counts (412 yes, 128 no) work as well as percentages. The labels on the slices show the computed percentage. If you want readers to see your original numbers too, add showData after pie and the legend shows each value.

Can a Mermaid pie chart have a zero or negative slice?

No. Mermaid’s documentation says pie chart values must be positive numbers greater than zero, and negative values cause an error. Leave a category with no data out of the chart, or mention it in the text around the diagram. Values may have up to two decimal places.

How do you make a donut chart in Mermaid?

Add a config block at the top of the diagram with pie: donutHole: 0.5 (any value from 0 to 0.9 sets the size of the hole), then write the pie as usual. The option needs Mermaid 11.16.0 or later; on an older renderer the chart either renders as a full pie or fails, so test it on the platform where it will be read.

Does GitHub render Mermaid pie charts?

Yes. GitHub renders fenced mermaid blocks in Markdown files, issues, pull requests and discussions, and the pie chart is one of the supported diagram types. GitHub controls which Mermaid version it runs, so the newest options such as donutHole may not work there yet. The basic syntax with a title, slices and showData is safe everywhere.