How to Make Flowcharts with Mermaid.js

Using markdown to create flowcharts that illustrate software systems

Mermaid.js is a powerful JavaScript library that can build a variety of charts and diagrams from a specialized flavor of markdown. While Mermaid.js supports many common and uncommon types of charts, perhaps the most frequently used type of chart it supports is the lowly flowchart.

Flowcharts are simple and flexible charts that connect different shapes together with arrows to convey a visual picture.

Flowcharts are often used to illustrate logical flows or decision-making processes and are frequently used in software engineering to show data or communication flows in software systems.

To show you what Mermaid.js can do with flowcharts, let’s take a look at building out a simple flowchart illustrating a REST request that flows from the client to the server, is fulfilled by the database, and then returns back to the client.

Basic Flowcharts with Mermaid.js

We’ll start first by creating a flowchart in markdown and defining the three shapes we’ll want on our flowchart.

The markdown for this looks as follows:

``` mermaid
flowchart
    Client
    Server
    Database
```