Prerequisites

VS Code
Install the following extensions in VS Code
1. Markdown Preview Enhanced
2. Markdown Preview Meramid Support
3. Meramid Markdown Syntax Highlighting (optional)

Getting Started

Create a file with markdown extension (abc.md) Then copy this code and paste it there

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;   
```

Open the file in VS Code and right click and select Markdown Preview Enhanced. Then you can see this diagram there

graph TD; A-->B; A-->C; B-->D; C-->D;

If you get this then your installation is successfull 🥳🥳

Render Mermaid diagram in Webpage

For this you have to use two script tags, they are :

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>mermaid.initialize({theme: 'dark', startOnLoad:true});</script>

For light theme you can replace that theme to light

Then you can write the mermaid diagram code inside div with class mermaid

Example:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ theme: 'dark', startOnLoad:true});</script>

    Here is one mermaid diagram:
    <div class="mermaid">
     pie title Some Title
         "FRIENDS" : 5
         "FAMILY" : 2
    </div>
  </body>
</html>

How to draw diagrams in our markdown using mermaid

Table of contents

Prerequisites

Getting Started

Render Mermaid diagram in Webpage