Awesome diagrams using Mermaid.js
Tags: graph, diagram, libraries, javascript
Published: 2022-04-14 13:02:01

Today I want to share an awesome library which I discovered recently. Creating diagrams for complicated software can be a time consuming and tricky if you are not using the right tool. Maintaining the diagram to show the most recent structure can be struggle. One of the most common go-to is [diagram.net](https://app.diagrams.net/):
![](https://conocimientolibre.mx/wp-content/uploads/2020/05/diagrams-660x330.png)

This web application allow users to drag and drop elements on a page and rename them to create variety of graphs. In my experience, this application can create really beautiful graphs which take a long Time to create. 

![](https://www.diagrams.net/assets/svg/home-dia2.svg)

My search was not done there. I aim to introduce speed in the diagram creations, version control, and easier interface than finding elements, resizing, and renaming them plenty of times. This is where I found [Mermaid](https://mermaid-js.github.io/mermaid/#/)  

![](https://mermaid-js.github.io/mermaid/img/header.png)

This library is written in Javascript and allows diagram creation using a markdown like syntax. Mermaid can create the following diagrams:
- Flowchart
- Sequence diagram 
- Class diagram
- State Diagram
- Entity Relationship diagram
- User journey
- Gantt
- Pie Chart
- Requirement diagram

Some of the benefits of using Mermaid.js:
- creating graphs as code
- saving time on styling the graphs
- version controlling your graphs
- easy integration with other libraries like diagram.net


To start we can install the “Markdown Preview Mermaid Support” extension on VSCode:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdq5w1pp9kfu1fyve457.png)
 
Then create a diagram directory in your desired codebase (optional). Finally create a markdown file like “app_diagram.md”. Choose the small (open preview to the side) icon on too right corner of your editor or ( shift + command + v for mac). Now you are ready to edit the file. Lets start with some easy examples:

The following showcases a Flowchart using mermaid:

```mermaid
	graph TD;
    		A-->B;
    		A-->C;
    		B-->D;
    		C-->D;
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joejiw5t20znp0bnulz5.png) 

Any mermaid code should be entered as a code snippet with “mermaid” tag. Each letter represents a __node__ which are connected via __edges__.

There are many samples of diagram creation on [the mermaid website](https://mermaid-js.github.io/mermaid/#/). I am going to demonstrate a settup that worked for me while creating flowcharts:

~~~

<!-- ```mermaid
flowchart Guide
    direction TB
    f[flow]
    s[[Step]]
    i([input])
    d[(Database)]
    Parameters>Parameters]
``` -->
<!-- Resource: https://mermaid-js.github.io/mermaid/#/ -->
<!-- Look at the graph here: https://mermaid.live -->
<!-- Connect to diagrams.net: https://www.diagrams.net/blog/mermaid-diagrams -->

```mermaid
flowchart LR
    subgraph Guide
        direction TB
        
        f[flow]
        s[[Step]]
        d[(Database)]
        Parameters>Parameters]
    end
    
    %% add in-line style
    Guide:::someclass
    classDef someclass fill:#f96;


    %%list of parameters
    p1>bank_name]
    p2>seller_info]


    %%list of steps
    s1[[1-withdraw_money]]
    s2[[2-purchase_bike]]


    %%list of flows
    f1[go_to_bank]
    f2[withdraw_from_atm]
    f3[contact_seller]
    f4[trade_bike]


    %%list of databases
    d1[(reads: customer_identification)]
    d2[(reads/writes: customer_balance)]
    d3[(writes: e_document_sign)]


    %% Create the step flows
    s1-.->s2;


    %% s1 flow
    p1-->|inputs|s1
    s1-->|calls|f1
    f1-->|calls|f2
    f2-->d1
    f2-->d2


    %% s2 flow
    p2-->|inputs|s2
    s2-->f3
    f3-->f4
    f4-->d3
\```

~~~



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dharwi2lje6mc7444331.png)

There are also other resources where you can export your graphs as PNG or SVG like [mermaid.live](https://mermaid.live). Moreover, you can checkout [this blog](https://www.diagrams.net/blog/mermaid-diagrams) regarding how to transfer your graphs from mermaid to diagram.net (FYI, digram.net does not support all mermaid functionalities) 

I hope you have enjoyed this tutorial. Feel free to express your comments.

Regards,

Erfan