Impressing Friends at (Isolation) Parties with Mermaid Diagrams
Tags: javascript, tutorial, webdev
Published: 2020-07-02 21:52:37

---
title: Impressing Friends at (Isolation) Parties with Mermaid Diagrams
description: Follow along in today's TGIF post that uses Mermaid + React that build wickedly cool charts on the fly and leaving you feeling like a magician
published: true
date: 2018-09-24 00:20:25 UTC
tags: javascript, tutorial, webdev
canonical_url: https://blog.dennisokeeffe.com/blog/diagrams-with-mermaid/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wnj8kayp6kz3vs4ngijm.png
---

_Note: This is re-share of one of my most popular posts that was originally published back at the end of 2018 to my old website. Sharing again now to keep up my streak of posting each day so I can ship some work features (on a Friday, I know 🤦). If you would like to see some more neat diagram content in the future (using libraries such as D3), follow to have them straight into your feed!_

[See the original blog post here.](https://blog.dennisokeeffe.com/blog/diagrams-with-mermaid/)

This is a small intro into building HTML diagrams on the fly.

I really, really want to be able to visualise some stacks I am building on the go down the track, so I thought this would be a very convenient way to explore that.

**Getting started**

**tl;dr**

```
create-react-app hello-mermaid
cd hello-mermaid
yarn add mermaid debounce
```

**Basics**

For this particular example, I decided just to use create-react-app hello-mermaid just to get things up and going.

Once this installs, changed into the folder and either `yarn add mermaid` or `npm install mermaid --save`.

In this scenario, I want to also dynamically update the chart, so also add in yarn add debounce or npm install debounce as I will use a textarea html element for this which I want to only fire once after being debounced. Check my original [blog post on debouncing in React](https://blog.dennisokeeffe.com/blog/react-debounce/) for more information.

**The code**

I decided to start using the [intro learn page for mermaid](https://mermaidjs.github.io/usage.html) to get up and going. Following the instructions, I updated my `src/App.js` file to look like the following:

![Updated CRA App.js file](https://cdn-images-1.medium.com/max/1024/1*Em4VE_j26ZA-ibM2HCNU6g.png)<figcaption>Updated CRA App.js file</figcaption>

What’s going on here? First of all, I am importing the required packages.

![1. Import downloaded packages](https://cdn-images-1.medium.com/max/1024/1*Kjxm4QymKl9H_iYEFkBsBg.png)<figcaption>1. Import downloaded packages</figcaption>

Secondly, I have updated the render code to give me a `div` to target with the outputted graph and a text area I can add markdown into:

![2. Updated render() method](https://cdn-images-1.medium.com/max/1024/1*eTBQKE05wFfpypfCl1hbtA.png)<figcaption>2. Updated render() method</figcaption>

Third, I want to initialise the graph with a basic chart on mount:

![3. Add in the componentDidMount lifecycle method](https://cdn-images-1.medium.com/max/1024/1*XvRvdLdVsngEO_y8Yhap1g.png)<figcaption>3. Add in the componentDidMount lifecycle method</figcaption>

Finally, I add the `handleChange` function to attempt an update to the graph.

![4. Handle any changes to the text box](https://cdn-images-1.medium.com/max/1024/1*k_FpEER8kB7aWIZPOf3L7Q.png)<figcaption>4. Handle any changes to the text box</figcaption>

Now, when we run `yarn start` on the terminal and the web page opens up, we get the following site:

![Aftermath of our updated App.js file](https://cdn-images-1.medium.com/max/1018/1*ay1WRUuOalNzLIfZpjSQsQ.png)<figcaption>Aftermath of our updated App.js file</figcaption>

Great! Now thanks to our `handleChange` function and graceful handling, we can also dynamically update the chart on the fly.

I’ve added a few examples from the web that you can now copy and paste into our text box to see how it works!

```s
graph LR
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{Decision}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]
```

![Graph LR after updating the textarea](https://cdn-images-1.medium.com/max/1024/1*ihAdCedCAPFhvq43vUUMmA.png)<figcaption>Graph LR after updating the textarea</figcaption>

```s
sequenceDiagram
  Alice->>+John: Hello John, how are you?
  Alice->>+John: John, can you hear me?
  John-->>-Alice: Hi Alice, I can hear you!
  John-->>-Alice: I feel great!
```

![Sequence diagram](https://cdn-images-1.medium.com/max/1024/1*0tXKjrWvtv2utVc0wKwWDQ.png)<figcaption>Sequence diagram</figcaption>

We can even do something as complex as a Gannt chart! Updating the `textarea` with more complicated examples can give us the following:

```s
gantt


       dateFormat                :YYYY-MM-DD
       title                     :Adding GANTT diagram functionality to mermaid
       excludes                  :excludes the named dates/days from being included in a charted task.. 
       (Accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) 
       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h
```

![Gantt chart example](https://cdn-images-1.medium.com/max/1024/1*QxOJoPnZewbNyKsniVAI_w.png)<figcaption>Gantt chart example</figcaption>

**Next steps**

Very cool! Now we can easily start creating some cool dynamic flows. What next? Be creative! I am planning to parse the markdown or html from the outputs and use it to help generate important reports or pseudocode to help build out some infrastructure or database schemas.

[You can see the final code on the repo here.](https://github.com/okeeffed/hello-mermaid)

[Also, checkout their docs to see what else you can do!](https://mermaidjs.github.io/)

[See the original blog post here.](https://www.dennisokeeffe.com/blog/diagrams-with-mermaid)