> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.jotterpad.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://mermaid-js.github.io/mermaid/#/gantt) 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](/en/article/format-text-with-markdown-gexkc6/#3-pre-formatted-code). To declare Mermaid in the code block to be rendered globally, use `codeBlockRenderAs: mermaid` in the Markdown file's [YAML](/en/article/customize-template-in-markdown-19ir6fu/).

![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermaid-gantt-chart-in-markdow_1tjx866.png)

To declare Mermaid to render on individual code block, 
1. Type 3 backticks (```) at the start of the code followed by space or return key.
2. Press the `</>` button at the top right corner.
3. Choose `Mermaid`.
4. 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](https://mermaid-js.github.io/mermaid/#/gantt)


# Examples

![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermiad-gantt-chart-project-pl_9ch0gm.png)

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

1. [One Year Gantt Chart](https://jotterpad.app/app/templates/one-year-gantt-chart-md?via=search)
2. [Simple Gantt Chart](https://jotterpad.app/app/templates/simple-gantt-chart-md?via=search)
3. [Two Month Gantt Chart Slides](https://jotterpad.app/app/templates/two-month-gantt-chart-md?via=search)
4. [Project Plan with Gantt Chart](https://jotterpad.app/app/templates/project-plan-md?via=search)

For a more detailed guide on Mermaid Gantt chart, please refer to the Mermaid official page [here](https://mermaid-js.github.io/mermaid/#/gantt).