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,

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



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

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:




  1. Flow chart diagram
  2. Family tree graph
  3. 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

Cancel

Thank you!