Articles on: Writing & Editing Tools

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 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.

Add Flow Chart using Mermaid

Flow chart can be added using Mermaid flow 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.

Mermaid syntax in code block that is declared locally.

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.

Mermaid Flow Chart Syntax


This is a node with text.

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


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 ShapeSyntax
Round edgesid1(This is the text in the box)
stadium-shapedid1([This is the text in the box])
Subroutine shapeid1[[This is the text in the box]]
Cylindrical shapeid1[(Database)]
Circleid1((This is the text in the circle))
Asymmetric shapeid1>This is the text in the box]
Rhombusid1{This is the text in the box}
Hexagonid1{{This is the text in the box}}
Parallelogramid1[/This is the text in the box/]
Parallelogram altid1[\This is the text in the box\]
Trapezoid altB[\Go shopping/]
Double circleid1(((This is the text in the circle)))

Type of LinkSyntax
A link with arrow headA-->B
A link with circle arrow headA --o B
A link with "X" arrow headB --x C
An open linkA --- B
Text on linksA-- This is the text! ---B or A---\|This is the text\|B
Link with arrow head and textA-->\|text\|B or A-- text -->B
Dotted linkA-.->B
Dotted link with textA-. text .-> B
Thick linkA ==> B
Thick link with textA == text ==> B
Multi directional arrowsA o--o B or B <--> C or C x--x D

Normal with arrow-->--->---->
Thick with arrow==>===>====>
Dotted with arrow-.->-..->-...->


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

Flow chart diagram
Family tree graph
Organization chart

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

Updated on: 21/09/2022

Was this article helpful?

Share your feedback


Thank you!