Mermaid pie chart examples: build responsive data visualizations

Pie charts are perfect for showing composition—how a whole splits into parts. Mermaid's pie chart syntax is lightweight and integrates directly into your docs or code, so you can keep your data visualization next to your code instead of hunting through spreadsheets.

Why use Mermaid pie charts?

Pie charts shine when you need to communicate:

• Budget allocation — where does the money go?
• Resource usage — CPU, memory, disk by component
• Market share — competitive landscape at a glance
• Team composition — headcount by department or skill
• Project breakdown — effort distribution across phases

Unlike traditional charting tools, Mermaid pie charts live in markdown, version control, and render in any tool that supports Mermaid (GitHub, GitLab, Notion, Confluence).

Mermaid pie chart syntax

The syntax is simple: pie title, then label-value pairs:

pie title Quarterly Revenue by Product
    "Enterprise" : 450
    "Mid-Market" : 320
    "Self-Serve" : 230

Values are relative, not absolute percentages. Mermaid calculates the proportions automatically.

Practical examples

Example 1: Frontend resource allocation

pie title Frontend Bundle Size Breakdown
    "JavaScript" : 520
    "CSS" : 180
    "Fonts" : 95
    "Images" : 205

Use this to track what's consuming space in your production bundle. Spotting that JavaScript is bloated? Time to code-split or bundle-analyze.

Example 2: Engineering team composition

pie title Engineering Team Headcount
    "Backend Engineers" : 8
    "Frontend Engineers" : 6
    "DevOps/Infrastructure" : 3
    "QA/Testing" : 2
    "Tech Lead" : 1

Share this in planning documents to show team distribution. Helps justify hiring or reorganization decisions.

Example 3: Cloud spend by service

pie title Monthly Cloud Costs
    "Compute (EC2)" : 3200
    "Database (RDS)" : 1800
    "Storage (S3)" : 420
    "Networking" : 680
    "Other" : 300

Perfect for cost optimization reviews. If compute is growing faster than others, that's a signal to investigate reserved instances or rightsizing.

Example 4: Bug distribution by severity

pie title Open Bugs by Severity
    "Critical" : 4
    "High" : 12
    "Medium" : 31
    "Low" : 48

Track incoming bug triage. Lots of low/medium bugs? Consider a bug bash sprint. Critical pile-up? Escalate.

Example 5: Customer segment split

pie title Customer Distribution
    "Enterprise (annual)" : 32
    "SMB (annual)" : 89
    "Monthly subscriber" : 156
    "Trial/Free" : 412

Understand your user base composition. Most users on free tier? The onboarding-to-paid conversion funnel is critical.

Best practices for Mermaid pie charts

1. Limit slices to 5–7. More than that and the chart becomes hard to read. Group small slices into "Other."

pie title Market Share (Europe)
    "Chrome" : 45
    "Firefox" : 18
    "Safari" : 22
    "Edge" : 10
    "Other" : 5

2. Order by size (largest first). Makes the chart easier to scan and spot the dominant category.

pie title Storage Usage by Server
    "Production DB" : 850
    "Cache (Redis)" : 320
    "File Backups" : 210
    "Logs & Metrics" : 120

3. Use clear, specific labels. "JavaScript" beats "JS"; "Q2 Revenue" beats "Revenue."

4. Include context in the title. pie title Quarterly Spend by Service is better than just pie title Spend.

Combining pie charts with other diagrams

Pie charts work best as standalone visualizations, but you can use them alongside flowcharts and state diagrams in the same document. For example:

• Show the pie chart of resource usage, then a flowchart of how those resources flow through the system.
• Use a pie chart to break down project phases, then a Gantt chart showing the timeline for each phase.

Rendering and exporting pie charts

Paste any of the examples above into MermaidCreator's playground to tweak the labels and values. Export as PNG or SVG for slides, reports, and documentation.

To embed in markdown everywhere (GitHub, Notion, blogs), use the triple-backtick fenced syntax:

```mermaid
pie title Your Title
    "Label 1" : 100
    "Label 2" : 75
```

FAQ

Can I make the pie chart interactive (click slices, sort)? Not in Mermaid itself—it generates static SVG. For interactive charts, use Chart.js, D3, or Plotly. But for documentation and code review, a static Mermaid pie chart is faster and stays in version control.

How do I add percentages manually? Labels can include any text: "Chrome (45%)" : 45. But Mermaid doesn't calculate them for you, so keep the number in sync with the value.

Can I export pie charts as interactive dashboards? Not directly. MermaidCreator exports PNG/SVG. For live dashboards, feed your data to Grafana, Tableau, or Metabase instead.

What's the maximum number of slices? Technically unlimited, but readability drops fast after 7–8. Group small categories into "Other" for clarity.

Ready to visualize your data? Try building a pie chart in MermaidCreator's playground now.