Code Graphs with Mermaid
Tags: visualisation, documentation, github
Published: 2023-07-25 14:54:48

---
title: Code Graphs with Mermaid
published: true
description: Exploring Mermaid, a JavaScript based diagramming and charting tool to use in your markdown
tags: visualisation, documentation, github
# cover_image: https://direct_url_to_image.jpg
# published_at: 2023-07-27 10:20 +0000
---

I was recently working on graph algorithms, and it gave me the opportunity to explore [Mermaid](https://mermaid.js.org/intro/), which is a tool for adding graphs and charts to your markdown.

DEV.to doesn't currently have support for Mermaid, however you can use Mermaid.live to generate charts as .png or .svg to use wherever you want. GitHub _does_ support Mermaid, so you can immediately level-up your README.md's with dependency graphs and sequence diagrams very easily!

## Making a sequence diagram

[documentation for sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html)

Let's start with an example of a sequence diagram for a HTTP request.

```text
sequenceDiagram
    User->>+Client: Enters a URL...
    Client->>+Server: Sends a HTTP GET request
    Server-->>-Client: Returns a HTTP response
    Client-->>-User: Senses are filled with delight
```

If I write this code in my README, this will be rendered by Mermaid like this:
![HTTP request sequence diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx2fcbwzed74xaxu8q4m.png)


## Displaying data in a Pie Chart

[documentation for pie charts](https://mermaid.js.org/syntax/pie.html)

Who doesn't want to display the makeup of bee species in the UK in the form of a pie chart?!

Here's my code:
```text
pie title Classification of Bee Species Groups in the United Kingdom
    "Colletidae" : 2000
    "Andrenidae" : 2700
    "Halictidae" : 3500
    "Melittidae" : 160
    "Megachilidae" : 3000
    "Apidae" : 6000
```

and the resulting chart:
![Pie chart showing the classification of bee species groups in the United Kingdom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxwy9vunneu6ytzk2on4.png)


## MVC pattern with state diagram

[documentation for state diagrams](https://mermaid.js.org/syntax/stateDiagram.html)

```text
stateDiagram-v2
    View --> Model
    Model --> View
    Model --> Controller
    Controller --> Model
```
![MVC pattern diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgg5dbl5lfvg900s8bfz.png)

## Describe a process with a flow chat

[documentation for flow charts](https://mermaid.js.org/syntax/flowchart.html)

I cannot say how many iterations of the peer review process I have drawn in my lifetime, but it is _a lot_. One more won't hurt!
Heres the code:
```text
flowchart TD
    A[Manuscript submitted] --> B(Editorial Review)
    B -.-|Revisions| A
    B --- C([Peer Review])
    C --> D{Reviewer 1}
    C --> E{Reviewer 2}
    C --> F{Reviewer 3}
    D -.-|Revisions| A
    E -.-|Revisions| A
    F -.-|Revisions| A
    D -->|OK| G(Editorial Decision)
    E -->|OK| G(Editorial Decision)
    F -->|OK| G(Editorial Decision)
    G -->|Accept| H>PUBLISH]
    G -->|Reject| I[\fa:fa-trash-alt/]
```

and the output looks like this:

![Flow chart of a peer-review process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mafxd4rzi9d8ynu7ruph.png)