Generate Graphs Using mermaid.js

In this tutorial, I’ll show you how to build graphs without using any design software. We’ll be using the library mermaid.js to do this. This tool allows us to write a few simple lines of code and is customizable. It’s great for writing technical documentation and for coders who want to hammer out some quick logic schemes.

We’re going to build this very simple flowchart. If you’d like, clone the accompanying GitHub repository rather than copy and paste the following code segments.

The first thing we’ll do is create a new project. Inside of our new directory, create a JavaScript file and build a server of your choosing. I’m going with JavaScript for this one. In the following, I use Express, a Node.js framework, as well as the Node.js module called path.

const express = require('express')
const app = express()
const path = require('path')
const port = 3000

app.get('/', (req, res) => res.sendFile(path.join(__dirname + '/index.html')))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Alright, next let’s create an HTML file. In this file, I’ve given us an H1 describing the chart. Then I’ve linked to the Mermaid.js CDN. I have also included the necessary mermaid.initialize script tag.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mermaid Diagrams</title>
</head>
<body>
	<h1 style="margin-left:25px">A Basic Left to Right Flowchart</h1> 

	<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
	<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

Now we’re all set up, we just have to create the graph. Below the H1, add a div with the class mermaid. Mermaid.js looks for the class named mermaid when it’s generating graphs, so this step is essential.

Next, let’s define what type of graph this is going to be. We’re building a simple flowchart. Specifically, this flowchart is organized left to right, and we designate this by writing graph LR. See the Mermaid.js documentation for all of the available options. Yes, even though we are working with an HTML file, the syntax for Mermaid.js looks like Markdown.

We need to indent all of the components of our graph. Our first step has the ID A, and text Set Up Your JavaScript Server. A connects to B. We follow this pattern through step D.

After we have defined the four basic and sequential steps of our flowchart, we add a link to step D by defining our click ability. On this line, we define our destination URL, as well as the tooltip text, Flowchart instructions.

Finally, let’s add some styling to the third step to make it look more mermaid-ish. Define style, followed by the step ID that the styling should apply to, C. Then define the three optional style types: fill, stroke, and stroke-width.


<div class="mermaid" id="lefttoright">
graph LR
    A(Set Up Your JavaScript Server)-->B(Create an HTML file);
    B-->C(Link your JavaScript server and the Mermaid CDN);
    C-->D(Write your flowchart);
    click D "https://mermaidjs.github.io/#/flowchart" "Flowchart instructions"
    style C fill:#90ee90,stroke:#333,stroke-width:1px;
</div>


Start your server and look at your new flowchart! Check out the accompanying repository for this tutorial on GitHub.