How do I write a Mermaid pie chart?

Start with `pie title Your Title` on the first line, then list each slice as `"Label" : value` on separate lines. Values can be any positive number — Mermaid automatically converts them to percentages. Example: `pie title Browser Share \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`. You don't need to ensure values sum to 100.

Can I control the color of each slice?

Mermaid pie charts use an auto-assigned color palette based on the diagram theme. You cannot directly specify per-slice colors in the diagram syntax. To customize colors, you would need to apply a custom Mermaid theme or post-process the SVG output. For presentations requiring specific brand colors, editing the exported SVG in a vector editor like Figma or Inkscape is the most practical approach.

Is there a maximum number of slices for a Mermaid pie chart?

There is no hard limit, but pie charts become hard to read beyond 7–8 slices as the segments become too narrow to label clearly. Best practice is to group small categories into an 'Other' bucket if any individual slice represents less than 3–5% of the total. Mermaid will attempt to render any number of slices, but readability degrades significantly above 10.

When should I use a pie chart versus a Gantt chart or timeline?

Use a pie chart when you want to show part-to-whole relationships for a single point in time — proportions, distributions, shares. Use a Gantt chart when you need to show tasks, durations, and scheduling across a time axis. Use a timeline when you want to mark specific events in chronological order. Pie charts answer 'how much of the total?'; Gantt and timeline charts answer 'when?'.

Mermaid Pie Chart Viewer

Render Mermaid pie charts instantly in your browser. Visualize proportional data and export to SVG or PNG. Free online tool.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

Pie charts communicate proportional distributions at a glance — market share, budget allocation, traffic sources, feature usage, or survey results. Mermaid's `pie` syntax is the simplest of all Mermaid diagram types: just a title and a list of label-value pairs. This simplicity makes pie charts a frequent output from AI assistants when users ask for a quick visualization of data. When product managers ask Claude or ChatGPT 'Show me a breakdown of our user acquisition channels' or developers ask 'Visualize the distribution of HTTP error codes in our API logs', they often receive a Mermaid pie chart. Zolkit renders the chart immediately so you can verify the labels, proportions, and overall visual impression before exporting it for a report or presentation. Mermaid pie charts automatically calculate percentages from the raw values and label each slice accordingly. The viewer exports crisp SVG for web embedding or 2× PNG for inclusion in slide decks, Word documents, and email reports. For more complex data visualization needs, consider pairing pie charts with Gantt charts (for timeline distribution) or timeline diagrams.

Related Diagrams

← Mermaid Diagram Viewer Mermaid Gantt Chart Viewer Mermaid Timeline Diagram Viewer Mermaid Mind Map Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.