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:

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:

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?

Thank you!