How to Create Pie Charts and Data Visualizations in Confluence with Mermaid

Pie charts are one of the simplest and most effective ways to communicate proportional data. Whether you are reporting survey results, breaking down a project budget, or showing how your team allocates time across activities, a pie chart turns a list of numbers into a visual that anyone can read in seconds. Confluence is where your team already stores reports, retrospectives, and planning documents, so embedding pie charts directly on those pages keeps your data alongside the context that explains it.

With Mermaid Plus for Confluence, you can create pie charts and other data visualizations using plain text syntax. No image exports, no spreadsheet screenshots, no broken attachments. You write the code once, and the chart renders directly on the Confluence page, updating whenever you edit the underlying data.

In this tutorial, you will learn how to create pie charts in Confluence using Mermaid syntax, with copy-paste examples you can drop straight onto a page. You will also learn how to build timelines, quadrant charts, and Git graphs for the kinds of data that pie charts cannot represent.

Why Pie Charts in Confluence?

Teams use pie charts when they need to show how a whole is divided into parts. Unlike bar charts or line graphs, a pie chart emphasizes relative proportions rather than absolute values or trends over time. This makes pie charts the right choice for:

• Survey results where you want to show how respondents distributed across answer options
• Budget breakdowns that show how funding is allocated across departments or categories
• Time tracking summaries that visualize how team members spent their hours in a sprint
• Market share reports that compare your product's share against competitors
• Issue distribution in Jira dashboards showing bugs versus features versus tech debt

Confluence pages are the natural home for this data. Your retrospective notes, planning documents, and status reports already live there. Adding a rendered pie chart to the same page means stakeholders see the data visualization alongside the narrative that explains it. When the numbers change, you update the Mermaid code and republish. No re-exporting from Excel, no uploading new images, no stale charts.

Mermaid's pie chart syntax is intentionally minimal. You define a title, list your categories with values, and Mermaid handles the math and rendering. With Mermaid Plus for Confluence, you also get a live preview editor, theme customization, and output size controls to make your charts look polished on any Confluence page.

Step-by-Step: Create Your First Pie Chart

Follow these steps to go from a blank Confluence page to a fully rendered pie chart.

Step 1 -- Install Mermaid Plus for Confluence

Head to the Atlassian Marketplace and search for Mermaid Plus for Confluence. Click Get App and follow the installation prompts. Once installed, the Mermaid Plus macro becomes available on every page in your Confluence instance. If your organization pre-approves apps, check with your Confluence admin first. The app supports both Confluence Cloud and Confluence Data Center.

Step 2 -- Insert the Mermaid Macro

Open any Confluence page in edit mode. Type /mermaid in the editor and select Mermaid Plus for Confluence from the dropdown. The configuration panel opens with a three-column layout: live preview on the left, quick templates in the middle, and the code editor with settings on the right.

Step 3 -- Write the Pie Chart Syntax

Start every pie chart with the pie keyword, add a title, then list your data rows:

pie title Team Sprint Effort
  "Feature development" : 45
  "Bug fixes" : 25
  "Code reviews" : 15
  "Meetings" : 10
  "Documentation" : 5

Each data row has a label in quotes and a numeric value separated by a colon. Mermaid treats the values as relative proportions and calculates the percentages automatically. You do not need to normalize your data to add up to 100.

Step 4 -- Customize Labels and Colors

Use clear, descriptive labels for each slice. The labels appear directly on the rendered chart, so they should be concise enough to read at a glance but specific enough to be meaningful. Adjust the Mermaid theme in the settings panel to change the color palette. Mermaid Plus offers four built-in themes: Default, Dark, Forest, and Neutral. Each theme applies its own color scheme to the pie slices automatically.

Step 5 -- Save and Publish

Preview the chart inside the macro editor to verify it renders correctly. Check that your labels are readable and that the proportions match your data. When you are happy with the result, click Save on the macro, then Publish the Confluence page. Your pie chart is now embedded in your documentation and will update whenever you re-edit the macro.

Mermaid Pie Chart Syntax Reference

Here is a quick-reference table for the pie chart syntax elements in Mermaid. Bookmark this section for whenever you need a syntax reminder.

Element	Syntax	Description
Chart keyword	pie	Starts a pie chart
Title	pie title My Chart	Displays a title above the chart
Data row	"Label" : value	One slice of the pie
Multiple rows	Add rows on new lines	Each row becomes a separate slice
Comment	%% This is a comment	Inline comment, not rendered

Key rules to remember:

• The pie keyword must appear on its own line before any data
• Labels must be wrapped in double quotes if they contain spaces
• Values are positive numbers; Mermaid calculates percentages from the total
• There is no hard limit on the number of slices, but readability degrades beyond 8 to 10 categories

3 Copy-Paste Pie Chart Examples

Below are three practical examples you can paste directly into the Mermaid Plus macro in Confluence. Each example demonstrates a different real-world use case.

Example 1 -- Basic Pie Chart: Team Sprint Effort

This is a straightforward pie chart showing how a development team distributes effort across activity categories during a typical sprint. It works well on retrospective pages, sprint review documents, and team dashboards.

pie title Sprint 14 Effort Distribution
  "Feature development" : 40
  "Bug fixes" : 20
  "Code reviews" : 15
  "Technical debt" : 10
  "Meetings" : 10
  "Documentation" : 5

This chart communicates one key message at a glance: the majority of the sprint effort went toward feature development, with bug fixes as the second largest category. If you want to compare this sprint to the previous one, duplicate the macro on the same page, change the data, and let stakeholders compare the two charts side by side.

When presenting to stakeholders who are not familiar with your team's day-to-day work, this kind of chart helps frame the conversation. A product manager can look at this and immediately ask whether the 10% allocated to technical debt is sufficient, or whether the 10% spent in meetings could be reduced.

Example 2 -- Survey Results: Employee Satisfaction

This example visualizes the results of an employee satisfaction survey with five response categories. It is useful on HR dashboard pages, team health check documents, and quarterly review reports.

pie title Employee Satisfaction Survey Q1 2026
  "Very satisfied" : 142
  "Satisfied" : 198
  "Neutral" : 67
  "Dissatisfied" : 31
  "Very dissatisfied" : 12

Notice that the raw survey counts are used directly as values. Mermaid sums them (142 + 198 + 67 + 31 + 12 = 450 total responses) and converts each count into a percentage of the total. This means you can paste your raw survey data without doing any pre-calculation.

For survey data like this, pie charts work best when you have 5 to 7 response categories. If your survey has 15 options, consider grouping them into broader categories before charting, or use a bar chart instead. The pie chart format prioritizes relative proportion over precise comparison, so it shines when you want to show that "most respondents fell into these two categories."

Example 3 -- Project Time Allocation: Quarterly Budget

This example breaks down how a project team plans to allocate hours across work streams for the upcoming quarter. It fits naturally on project planning pages, budget proposals, and resource allocation documents.

pie title Q3 2026 Project Time Allocation
  "Backend development" : 350
  "Frontend development" : 280
  "QA and testing" : 200
  "DevOps and infrastructure" : 150
  "UX research and design" : 120
  "Project management" : 100

This chart uses larger numeric values representing planned person-hours for each work stream. The values do not need to be percentages; Mermaid normalizes them automatically. This approach is particularly useful for budget and resource planning because you can update a single number (for example, increasing QA from 200 to 250 hours) and immediately see how the proportional breakdown shifts.

When presenting resource allocation to leadership, pair this chart with a brief table on the same Confluence page listing the absolute numbers alongside the visual. The pie chart tells the proportional story; the table provides the precision.

Advanced Pie Chart Techniques

Once you are comfortable with the basic syntax, these techniques help you get more out of pie charts in your Confluence documentation.

Handling Many Categories

When your data has more than 8 categories, pie charts become difficult to read. The slices get too narrow, labels overlap, and the visual communication breaks down. Here are two strategies:

Group small categories into "Other". Combine any category below a threshold (for example, under 5%) into a single "Other" slice. This keeps the chart readable while preserving the overall proportions:

pie title Website Traffic Sources
  "Organic search" : 42
  "Direct" : 25
  "Social media" : 15
  "Email campaigns" : 8
  "Referral" : 6
  "Other" : 4

Use multiple pie charts for comparison. If you need to show detailed breakdowns for different groups, place separate pie charts side by side on the same Confluence page. Each chart stays clean with 4 to 6 slices, and readers compare them visually.

Keeping Data Current

One of the biggest advantages of Mermaid pie charts over pasted images is that the data lives as editable text on the Confluence page. When your numbers change, you click the macro, edit, update the values, and save. There is no external tool to open, no image to re-export, and no attachment to re-upload.

For charts that update regularly (sprint summaries, monthly metrics, quarterly budgets), add a brief note above the macro indicating when the data was last updated. This helps readers trust that the chart reflects current information rather than a stale snapshot.

Pairing Charts with Context

A pie chart on its own tells you what the proportions are. It does not explain why. On your Confluence page, add a brief paragraph above or below the chart explaining the key takeaway. For example:

• "This sprint, feature development dropped from 50% to 40% due to an increase in bug fixes from the v2.0 release."
• "Employee satisfaction improved compared to Q4 2025, with 'very satisfied' responses increasing from 28% to 32%."

This combination of visual and narrative is more powerful than either element alone. The chart catches the reader's attention; the text provides the interpretation.

Other Mermaid Data Visualization Types

Pie charts are ideal for proportional data, but many datasets call for different visualization formats. Mermaid Plus for Confluence supports 26 diagram types, several of which are specifically designed for data visualization. Here are three that complement pie charts in a Confluence documentation toolkit.

Git Graph: Branch and Commit History

Git graphs visualize the history of a repository, showing branches, commits, and merges over time. They are useful on developer onboarding pages, release process documentation, and architecture decision records where you need to show how code flows through branches.

gitGraph
  commit id: "Initial setup"
  commit id: "Add auth module"
  branch feature/dashboard
  checkout feature/dashboard
  commit id: "Dashboard UI"
  commit id: "Dashboard API"
  checkout main
  branch hotfix/auth-bug
  commit id: "Fix token expiry"
  checkout main
  merge hotfix/auth-bug id: "Hotfix release"
  merge feature/dashboard id: "Dashboard release"
  commit id: "Version bump to 2.1"

This Git graph tells the story of a feature branch being developed in parallel with a hotfix. The merge points show exactly when each branch was integrated into main. For teams that document their branching strategy in Confluence, this kind of visual is far more effective than a text description.

Git graphs work well alongside pie charts on release summary pages. Use a pie chart to show the distribution of commits by contributor or by file type, and a Git graph to show the branch topology.

Timeline: Project Milestones and Events

Timelines present chronological sequences of events, making them ideal for project milestones, product roadmaps, and historical summaries. Unlike Gantt charts, timelines do not show task duration; they highlight key moments in sequence.

timeline
  title Product Launch Timeline
  section Q1 2026
    Market research complete : Jan 15
    Competitive analysis published : Feb 1
    Product requirements finalized : Feb 28
  section Q2 2026
    Design sprint completed : Apr 10
    Alpha release : May 1
    Beta program opens : May 15
  section Q3 2026
    Public launch : Jul 1
    First update release : Aug 15
    Customer feedback report : Sep 30

Timelines are a natural companion to pie charts on planning pages. Use a pie chart to show how resources are allocated across phases, and a timeline to show when key milestones occur. Together, they give stakeholders both the "how much" and the "when" in a format that is easy to scan.

Quadrant Chart: Prioritization Matrices

Quadrant charts plot items on a two-axis grid, dividing the space into four labeled quadrants. They are commonly used for prioritization matrices (impact vs. effort), risk assessments (likelihood vs. severity), and market analysis (growth vs. market share).

quadrantChart
  title Feature Prioritization Matrix
  x-axis Low Impact --> High Impact
  y-axis Low Effort --> High Effort
  quadrant-1 Quick Wins
  quadrant-2 Strategic Investments
  quadrant-3 Deprioritize
  quadrant-4 Fill-Ins
  "User onboarding flow" : [0.8, 0.3]
  "Dark mode toggle" : [0.4, 0.2]
  "API rate limiting" : [0.7, 0.6]
  "Mobile responsive nav" : [0.6, 0.4]
  "Bulk export feature" : [0.9, 0.7]
  "Keyboard shortcuts" : [0.3, 0.3]
  "SSO integration" : [0.85, 0.8]
  "Search improvements" : [0.75, 0.5]

Each item is plotted at coordinates between 0 and 1 on both axes. The quadrant labels give immediate context: items in "Quick Wins" are high-impact and low-effort, while items in "Strategic Investments" are high-impact but also high-effort. This chart type is a staple of product planning, and having it rendered directly on a Confluence page keeps the prioritization conversation grounded in a shared visual.

Quadrant charts complement pie charts effectively. Use a pie chart to show how many features fall into each priority category, and a quadrant chart to show exactly which features sit where. The pie chart gives the aggregate view; the quadrant chart gives the item-level detail.

Choosing the Right Chart Type

With multiple visualization options available, here is a quick guide to choosing the right chart for your data:

Data Type	Best Chart	Example Use Case
Parts of a whole	Pie chart	Budget allocation, survey results
Chronological events	Timeline	Product roadmap, release history
Prioritization	Quadrant chart	Feature priority, risk assessment
Branch and merge history	Git graph	Release process, branching strategy
Task scheduling	Gantt chart	Sprint plan, project timeline
Flow and decisions	Flowchart	Process documentation, approval workflow
Comparison across categories	XY chart (bar)	Revenue by quarter, bugs by severity

If your data is about proportions and you have 3 to 8 categories, start with a pie chart. If you need to show change over time, reach for a timeline. If you need to prioritize a list of items against two criteria, use a quadrant chart.

Tips for Effective Data Visualization in Confluence

Regardless of which chart type you use, these practices will help your Confluence visualizations communicate clearly.

Keep it focused. Each chart should answer one question. If you find yourself trying to show budget allocation and timeline and team distribution all in one chart, split them into separate diagrams. Three clear charts are better than one cluttered chart.

Use consistent colors across pages. If "Bug fixes" is always represented by the same color across your team's charts, readers learn to recognize it instantly. Mermaid Plus themes help with this by applying consistent palettes, but you can also enforce consistency through team conventions documented on a shared Confluence page.

Label everything clearly. Mermaid lets you add titles to every chart. Use them. A chart titled "Q3 Budget" is more useful than an untitled chart that readers have to infer the meaning of from surrounding text. For pie charts, make sure each slice label is descriptive and concise.

Update data regularly. Charts that show stale data erode trust. If you are displaying sprint metrics in a pie chart, update it at the end of every sprint. If you are showing quarterly budget allocation, update it at the start of each quarter. The text-based nature of Mermaid makes this trivially easy compared to re-exporting images from other tools.

Place charts near their context. A pie chart showing survey results should appear right next to the survey summary text, not buried at the bottom of a long page. Confluence's inline macro placement makes this straightforward. Insert the chart exactly where the reader will want to see it.

Use output size controls. Mermaid Plus lets you control the displayed size of your chart (Small, Medium, Large, X-Large). A pie chart on a dashboard summary might work well at Small size, while a detailed quadrant chart used in a planning session might need Large or X-Large to keep labels readable.

Common Mistakes to Avoid

• Using too many slices. A pie chart with 15 slices is unreadable. Group small categories or switch to a different chart type.
• Forgetting the pie keyword. Every Mermaid pie chart must start with pie on its own line. Without it, Mermaid does not know what diagram type to render.
• Missing quotes around labels. Labels that contain spaces must be wrapped in double quotes. Without quotes, Mermaid will fail to parse the data row.
• Using zero or negative values. Mermaid pie chart values must be positive numbers. A zero value creates an invisible slice, and negative values will cause a rendering error.
• Omitting the title. While technically optional, a chart without a title forces readers to guess what the data represents. Always include pie title Your Descriptive Title.
• Copying data without checking. When pasting data from spreadsheets, verify that the numbers are correct and that no extra formatting characters were included. A stray dollar sign or comma in a number will break the syntax.

Theme and Appearance Settings

Mermaid Plus for Confluence gives you control over how your charts look on the page. In the configuration panel, you can adjust:

• Theme -- Choose from Default, Dark, Forest, or Neutral to match your Confluence space's visual style. The Default theme uses your custom color settings, while other themes apply their own curated palettes.
• Font family -- Select from Inter, Arial, Helvetica, Georgia, or Courier to match your organization's typography guidelines.
• Font size -- Set to 12px, 14px (default), 16px, 18px, or 20px for optimal readability.
• Custom colors -- Adjust node background, text color, border, line, and background colors using the visual color picker.
• Output size -- Scale your chart to Small (0.5x), Medium (1x), Large (1.5x), or X-Large (2x) to fit the layout of your Confluence page.

For pie charts, the theme setting is the most impactful because it controls the slice color palette. Experiment with different themes in the live preview to find the one that looks best with your data. Dark mode is automatically supported: when a reader views your Confluence page in dark mode, the chart adapts its text and background colors for readability.

Performance and Reliability

Diagrams created with Mermaid Plus render instantly on page load using cached SVG. The Mermaid.js library is only loaded during configuration, not when viewing pages. This means your pie charts, timelines, and quadrant charts do not slow down Confluence page load times, even on pages with multiple diagrams.

All settings and code are preserved when you re-edit an existing diagram. Click on any Mermaid Plus macro and select Edit to reopen the configuration panel with your previous code and settings intact. This makes iterative refinement straightforward: create a chart, publish the page, gather feedback, then come back and adjust the data or appearance without starting over.

Related Resources

• Mermaid Plus for Confluence usage guide -- detailed configuration options, theme settings, and all 26 supported diagram types
• How to create Gantt charts in Confluence -- step-by-step tutorial for project timelines with dependencies, milestones, and status flags
• Mermaid Syntax Cheat Sheet for Confluence -- quick reference for all Mermaid diagram types with copy-paste examples
• Create Mermaid diagrams in Confluence -- broader guide covering flowcharts, sequence diagrams, class diagrams, and more

Pie charts are a practical, high-leverage addition to your Confluence documentation. A well-structured Mermaid pie chart takes seconds to create, lives alongside your written context, and stays current with a simple text edit. Install Mermaid Plus for Confluence, paste one of the examples above into a page, and start visualizing your data where your team already works.