Mermaid Charts (Pie, Bar, Line)

calendarDec 14, 2025 · 3 min read · mermaid charts pie bar line data-visualization diagrams  ·
Share on: linkedincopy

Mermaid supports various chart types including pie charts, bar charts, and line charts. Perfect for visualizing data and statistics in documentation.

Use Case

Use Mermaid charts when you need to:

  • Visualize data distributions (pie charts)
  • Compare values across categories (bar charts)
  • Show trends over time (line charts)
  • Create simple, text-based data visualizations

Pie Charts

Pie charts show proportional data as slices of a circle.

Basic Pie Chart

1```mermaid
2pie title Distribution of Languages
3    "Python" : 35
4    "JavaScript" : 25
5    "Go" : 20
6    "Rust" : 15
7    "Other" : 5
8```

Result:

Example 1: Research Methods Distribution

1```mermaid
2pie title Research Methods Used
3    "Experimental" : 45
4    "Theoretical" : 30
5    "Simulation" : 15
6    "Survey" : 10
7```

Result:

Example 2: Performance Metrics

1```mermaid
2pie title System Performance Breakdown
3    "CPU Usage" : 40
4    "Memory" : 30
5    "Network I/O" : 20
6    "Disk I/O" : 10
7```

Result:

Bar Charts (GitGraph Style)

Mermaid bar charts use the gitgraph syntax for creating bar-like visualizations, or you can use xychart-beta for more traditional bar charts.

XY Chart Bar

1```mermaid
2xychart-beta
3    title "Monthly Sales Data"
4    x-axis [Jan, Feb, Mar, Apr, May, Jun]
5    y-axis "Revenue ($)" 0 --> 10000
6    bar [5000, 6000, 7500, 8200, 9500, 11000]
7```

Result:

Example 1: Performance Comparison

1```mermaid
2xychart-beta
3    title "Algorithm Performance Comparison"
4    x-axis [Algorithm A, Algorithm B, Algorithm C, Algorithm D]
5    y-axis "Execution Time (ms)" 0 --> 500
6    bar [450, 320, 280, 195]
7```

Result:

Line Charts

Line charts show trends over time using the xychart-beta syntax.

Basic Line Chart

1```mermaid
2xychart-beta
3    title "Temperature Over Time"
4    x-axis [Jan, Feb, Mar, Apr, May, Jun]
5    y-axis "Temperature (°C)" 0 --> 30
6    line [5, 8, 12, 18, 22, 25]
7```

Result:

Example 1: Multiple Series

1```mermaid
2xychart-beta
3    title "Accuracy Over Epochs"
4    x-axis [Epoch 1, Epoch 5, Epoch 10, Epoch 15, Epoch 20]
5    y-axis "Accuracy (%)" 0 --> 100
6    line [45, 65, 78, 85, 92]
7    line [40, 60, 72, 80, 88]
8```

Result:

Example 2: Research Progress

1```mermaid
2xychart-beta
3    title "Research Progress Over Time"
4    x-axis [Week 1, Week 2, Week 3, Week 4, Week 5, Week 6]
5    y-axis "Completion (%)" 0 --> 100
6    line [10, 25, 40, 55, 75, 90]
7```

Result:

Combined Charts

You can combine bar and line charts in a single visualization.

Example: Bar and Line Combination

1```mermaid
2xychart-beta
3    title "Revenue and Growth Rate"
4    x-axis [Q1, Q2, Q3, Q4]
5    y-axis "Revenue ($)" 0 --> 50000
6    y-axis "Growth (%)" 0 --> 20
7    bar [30000, 35000, 42000, 48000]
8    line [5, 8, 12, 15]
9```

Result:

Syntax Reference

Pie Chart Syntax

1pie title "Chart Title"
2    "Label 1" : value1
3    "Label 2" : value2
4    "Label 3" : value3

XY Chart Syntax

1xychart-beta
2    title "Chart Title"
3    x-axis [label1, label2, label3, ...]
4    y-axis "Y-axis Label" min --> max
5    bar [value1, value2, value3, ...]
6    line [value1, value2, value3, ...]

Notes

  • Pie charts automatically calculate percentages from values
  • XY charts support multiple series (multiple bar or line declarations)
  • Use descriptive titles and axis labels
  • Ensure data arrays match x-axis labels in length
  • XY charts are in beta - syntax may change

Gotchas/Warnings

  • ⚠️ XY Chart Beta: xychart-beta is experimental - check Mermaid docs for updates
  • ⚠️ Data Length: X-axis labels and data arrays must have matching lengths
  • ⚠️ Pie Values: Values are relative - Mermaid calculates percentages automatically
  • ⚠️ Multiple Series: Each bar or line declaration creates a new series
  • ⚠️ Axis Range: Set appropriate min/max for y-axis to show data clearly

Related Snippets