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
renderAsstringmermaidrenderAs=mermaid
heightnumber200height=200
widthnumber200width=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 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\]
TrapezoidA[/Christmas\]
Trapezoid altB[\Go shopping/]
Double circleid1(((This is the text in the circle)))


Links between nodes

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


Length of a link

Length123
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:



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.
Was this article helpful?
Cancel
Thank you!