> ## 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 Flow Chart in Markdown Using Mermaid

A flowchart is a diagram that depicts the steps in a process. Basic flowcharts are easy to create and, because the shapes are simple and visual, they are easy to understand. JotterPad uses [Mermaid.js](https://mermaid-js.github.io/mermaid/#/flowchart) to design and preview flow chart in Markdown files. All flow charts are composed of nodes, the geometric shapes and edges, the arrows or lines. The mermaid code defines the way that these nodes and edges are made and interact.

![Example of family tree flow chart in JotterPad.](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/screenshot1_1pwmo1.png)

# Add Flow Chart using Mermaid
Flow chart can be added using Mermaid flow 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/).

![Mermaid syntax in code block that is declared locally.](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermiad-flow-chart_1u1gnl1.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`.


# Mermaid Flow Chart Syntax

## Node

This is a node with text.

```
flowchart LR
    id[This is the text in the box]
```

## Graph

This statement declares the direction of the flow chart.

This declares the flowchart is oriented from top to bottom (`TD` or `TB`).

```
flowchart TD
    Start --> Stop
```

This declares the flowchart is oriented from left to right (`LR`).

```
flowchart LR
    Start --> Stop
```

Possible FlowChart orientations are:

* TB - top to bottom
* TD - top-down/ same as top to bottom
* BT - bottom to top
* RL - right to left
* LR - left to right


## Node shapes

| Node Shape        | Syntax                                    |
| ----------------- | ----------------------------------------- |
| Round edges       | `id1(This is the text in the box)`        |
| stadium-shaped    | `id1([This is the text in the box])`      |
| Subroutine shape  | `id1[[This is the text in the box]]`      |
| Cylindrical shape | `id1[(Database)]`                         |
| Circle            | `id1((This is the text in the circle))`   |
| Asymmetric shape  | `id1>This is the text in the box]`        |
| Rhombus           | `id1{This is the text in the box}`        |
| Hexagon           | `id1{{This is the text in the box}}`      |
| Parallelogram     | `id1[/This is the text in the box/]`      |
| Parallelogram alt | `id1[\This is the text in the box\]`      |
| Trapezoid         | `A[/Christmas\]`                          |
| Trapezoid alt     | `B[\Go shopping/]`                        |
| Double circle     | `id1(((This is the text in the circle)))` |

## Links between nodes

| Type of Link                  | Syntax                                                      |
| ----------------------------- | ----------------------------------------------------------- |
| A link with arrow head        | `A-->B`                                                     |
| A link with circle arrow head | `A --o B`                                                   |
| A link with "X" arrow head    | `B --x C`                                                   |
| An open link                  | `A --- B`                                                   |
| Text on links                 | `A-- This is the text! ---B` or `A---\|This is the text\|B` |
| Link with arrow head and text | `A-->\|text\|B` or `A-- text -->B`                          |
| Dotted link                   | `A-.->B`                                                    |
| Dotted link with text         | `A-. text .-> B`                                            |
| Thick link                    | `A ==> B`                                                   |
| Thick link with text          | `A == text ==> B`                                           |
| Multi directional arrows      | `A o--o B` or `B <--> C` or `C x--x D`                      |

## Length of a link

| Length            |    1   |    2    |     3    |
| ---- | --- | --- | --- |
| Normal            |  `---` |  `----` |  `-----` |
| Normal with arrow |  `-->` |  `--->` |  `---->` |
| Thick             |  `===` |  `====` |  `=====` |
| Thick with arrow  |  `==>` |  `===>` |  `====>` |
| Dotted            |  `-.-` |  `-..-` |  `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |

## Examples
Here are some examples of JotterPad Markdown templates using Mermaid flow chart:


![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/screenshot1_1wriz4v.png)

1. [Flow chart diagram](https://jotterpad.app/app/templates/flow-chart-diagram-md)
2. [Family tree graph](https://jotterpad.app/app/templates/family-tree-graph-md)
3. [Organization chart](https://jotterpad.app/app/templates/organization-chart-md)


For a more detailed guide on Mermaid flow chart, please refer to the Mermaid official page [here](https://mermaid-js.github.io/mermaid/#/flowchart?id=flowcharts-basic-syntax).