Code Graphs with Mermaid

#visualisation #documentation #github

I was recently working on graph algorithms, and it gave me the opportunity to explore Mermaid, 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

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

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:

Displaying data in a Pie Chart

documentation for pie charts

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:

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:

MVC pattern with state diagram

documentation for state diagrams

stateDiagram-v2
    View --> Model
    Model --> View
    Model --> Controller
    Controller --> Model

Describe a process with a flow chat

documentation for flow charts

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:

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: