DEV Community

Rahul T
Rahul T

Posted on

How to draw flowChart(diagrams) in markdown using Mermaid!!

#markdown #diagrams #flowchart #algorithms

Table of contents

Prerequisites

  1. VS Code
  2. 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

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode 
<script>mermaid.initialize({theme: 'dark', startOnLoad:true});</script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

You can see more examples of diagrams here

Top comments (0)

Read next

rumendimov profile image

🚀 Common C# Performance Optimization Myths

Rumen Dimov -

sunheight41 profile image

Mieszkanie Marzeń: Jak Stworzyć Idealną Przestrzeń dla Siebie

Ahmad Gravesen -

lewis_kerr_2d0d4c5b886b02 profile image

Setting Up and Optimizing Clash Proxies for Peak Performance

Lewis Kerr -

yewcirrus3 profile image

A Peek At Leg And Arm Injury Claim's Secrets Of Leg And Arm Injury Claim

Franco Whitaker -