How to draw diagrams in our markdown using mermaid
Are you tired of drawing diagrams? THen you are in right place. Here i will show you how to draw diagrams in our markdown file using mermaid
Table of contents
Prerequisites
- VS Code
- Install the following extensions in VS Code
- Markdown Preview Enhanced
- Markdown Preview Meramid Support
- 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>
This will produce this output:
pie title Some Title
"FRIENDS" : 5
"FAMILY" : 2
You can see more examples of diagrams here