Add Gantt Chart in Markdown Using Mermaid
A Gantt chart is a type of bar chart that illustrates a project schedule. JotterPad uses Mermaid.js to design and preview Gantt chart in Markdown files.
Add Gantt chart using Mermaid
Gantt chart can be added using Mermaid Gantt 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:
Parameter | Type | Possible Values | Example |
---|---|---|---|
renderAs | string | mermaid | renderAs=mermaid |
height | number | 200 | height=200 |
width | number | 200 | width=200 |
Use ,
to add multiple parameters. E.g. renderAs=mermaid, height=200
.
Example:
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Mermaid Gantt Chart Syntax
Please refer to the Mermaid official documentation here:
Examples
Here are some examples of JotterPad Markdown templates using Mermaid Gantt chart:
For a more detailed guide on Mermaid Gantt chart, please refer to the Mermaid official page here.
Updated on: 21/09/2022
Thank you!