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
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
If you get this then your installation is successfull 🥳🥳
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:
You can see more examples of diagrams here