Mermaid Tutorial (flowchart)

Table of contents

• Diagram type
• Nodes
• Connections
• Decisions

flowchart TD
    start(START) -->
    input[/Get l,b/] -->
    process[A = l*b] -->
    decision{is A < 12}
    decision --> |Yes| input
    decision --> |No| output 
    output[/print A/] -->
    stop(STOP)

In this short tutorial, we will look at a few useful nodes and syntax needed to prepare a flowchart using the Mermaid diagram library.

The diagram above is produced using the syntax below:

🚫 Wrap Code📋 Copy
01: flowchart TD
02:     start(START) -->
03:     input[/Get l,b/] -->
04:     process[A = l*b] -->
05: 
06:     decision --> |Yes| input
07:     decision --> |No| output 
08:     output[/print A/] -->
09:     stop(STOP)

Diagram type

The Mermaid Diagram library supports several diagram types.

Here are some of the diagram types supported by Mermaid:

• Flowchart: We will be looking at this in the tutorial
• Sequence Diagram
• Class Diagram
• State Diagram
• Gantt Diagram
• Pie Charts
• User Journey Diagram
• Entity Relationship Diagram

To create a flowchart diagram you have to specify this as the first instruction set (As shown on line 01 in the example above).

This is immediately followed by the direction of the diagram. In the case of our example, this is set to TD (top to bottom). This will cause the diagram to flow horizontally.

flowchart TD

You may also use RL (right to left) to cause the diagram to flow vertically.

Nodes

Nodes are the individual components within our diagram. These components are then connected by directional arrows to mark the flow from one to the other.

Start-End Node

flowchart TD
    start(START)

Typically an oval shape is used to mark the start or end of a flow chat. You can create one by typing out its name and then enclosing a description within brackets i.e.: start(START).

Input-Output Node

flowchart TD
    input[/Get l,b/]

A rhomboid is used to denote an input or output within a flow this takes the same syntax as the start node but with square brackets with forward slashes within them instead of normal brackets. i.e: input[/Get l,b/]

Process Node

flowchart TD
    process[A = l*b]

A process node is used to document the internal processing within a system flow. This is denoted by a label and then a description housed within square brackets. i.e: process[A = l*b].

Connections

A forward-pointing arrow --> should be placed between two nodes to create a connection between them.

For example :

🚫 Wrap Code📋 Copy
01: flowchart TD
02:     A(First Node) --> C
03:     B(Second Node)
04:     C(Third Node) --> A

flowchart TD
    A(First Node) --> C
    B(Second Node)
    C(Third Node) --> A

Notice how in the above example we connect A directly to C and then C back to A leaving out B by using the arrow to direct which nodes we will like to connect.

Decisions

Most flow chats have an element of decision-making within them. Mermaid provides us with the syntax to achieve this.

flowchart TD
    input[/Get A/] -->
    decision{is A < 12}
    decision --> |Yes| positiveOutput
    decision --> |No| negativeOutput
    positiveOutput[/print yes/] --> stop
    negativeOutput[/print no/] --> stop
    stop(STOP)

🚫 Wrap Code📋 Copy
01: flowchart TD
02:     input[/Get A/] -->
03:     decision{is A > 12}
04:     decision --> |Yes| positiveOutput
05:     decision --> |No| negativeOutput
06:     positiveOutput[/print yes/] --> stop
07:     negativeOutput[/print no/] --> stop
08:     stop(STOP)

In the above example, we introduce a new syntax decision{is A < 12} right after our input.

This is the syntax for branching based on a decision. The different options are mapped to other nodes using a directional arrow. In the above example, if the input A is greater than 12 the diagram flows to the positiveOutput node and to the negativeOutput node if it's less than 12.

Here is another article for you 😊 "Mermaid Tutorial (setup)"