Articles on: Writing & Editing Tools

Add Pie Chart in Markdown Using Mermaid

A Pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. JotterPad uses Mermaid.js to design and preview Pie chart in Markdown files.

Add Pie chart using Mermaid

Pie chart can be added using Mermaid Pie chart syntax in JotterPad's Markdown code block. To declare Mermaid in the code block to be rendered globally, use codeBlockRenderAs: mermaid in the Markdown file's YAML.

To declare Mermaid to render on individual code block,
Type 3 backticks (```) at the start of the code followed by space or return key.
Press the </> button at the top right corner.
Choose Mermaid.
Add renderAs=mermaid in metadata.

Supported Metadata:
ParameterTypePossible ValuesExample

Use , to add multiple parameters. E.g. renderAs=mermaid, height=200.


pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Mermaid Pie Chart Syntax

Please refer to the Mermaid official documentation here:
Pie Chart Syntax


Here are some examples of JotterPad Markdown templates using Mermaid Pie chart:

Pie Chart Infographics Slides

For a more detailed guide on Mermaid Pie chart, please refer to the Mermaid official page here.

Updated on: 21/09/2022

Was this article helpful?

Share your feedback


Thank you!