Making Pie (Charts) out of Mermaid.js

I love the myriad of types of diagrams that Mermaid.js can generate from sequence diagrams to user journey maps to class diagrams. However, I have to admit that I was somewhat surprised to discover that in addition to these specialized charts, Mermaid.js can also generate the most basic of all charts: the pie chart.

In this short article I'll show you the basic syntax for representing a pie chart in Mermaid.js.

First of all, Mermaid.js works in a variety of settings from GitHub markdown to Polyglot Notebooks and various add-ins for tools like Jira and Wordpress. I go into the process for integrating Mermaid.js a bit more in my article on entity relationship diagrams if you are curious about the overall context.

With Mermaid, you can make a simple pie chart with the simple pie keyword, followed optionally by a title and then individual data points formatted as "Data Point": value.

Here's a simple Mermaid.js Pie Chart illustrating the leading causes of developer tears from 65 respondents:

pie
   title Leading Causes of Developer Tears
   "JavaScript": 42
   "DNS": 8
   "Leaving a VM on": 15

That simple markdown is all you need to render a pie chart using Mermaid.js.

There are a couple of things here I want to highlight before I close this article:

1. The values do not need to add up to 100. Mermaid.js figures out the total percentage by the total value count
2. The values do not need to be in a particular order. Mermaid.js will organize the chart in descending order automatically

There are a few more ways of customizing pie charts in Mermaid.js so I'd encourage you to read the Mermaid.js pie chart documentation for full theming reference, but pie charts on their own are very simple and easy to add to your application.