Home > Software Engineering > Making Pie (Charts) out of Mermaid.js

Making Pie (Charts) out of Mermaid.js

Quick and Effective Generation of Pie Charts with Mermaid.js and Markdown


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:

    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.


  • Matt Eland
    Microsoft MVP in AI, Professional Programming Instructor

    After several decades as a software engineer and engineering manager, Matt now serves as a software engineering instructor and gets to raise up future developers and unleash them upon the world to build awesome things. Matt is a Microsoft MVP in Artificial Intelligence, runs several blogs and channels on data science and software engineering topics, is currently pursuing a master's degree in data analytics, and helps organize the Central Ohio .NET Developer Group while contributing to local and regional conferences. In his copious amounts of spare time, Matt continues to build nerdy things and looks for ways to share them with the larger community.

    View all posts

1 comment

Dew Drop – April 14, 2023 (#3922) – Morning Dew by Alvin Ashcraft April 14, 2023 - 6:42 am

[…] Making Pie (Charts) out of Mermaid.js (Matt Eland) […]


Leave a Reply

Related Content

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More