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:
Gantt Chart Syntax

Examples

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

One Year Gantt Chart
Simple Gantt Chart
Two Month Gantt Chart Slides
Project Plan with Gantt Chart

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

Updated on: 21/09/2022