How to draw graph in github readme with code

Cool ass dynamic charts generated by code inside readme is trully awesome ain't it?
In Gtihub,there is a built in way to make flow charts with code.Original project named mermaid as an open source project.Later adopted by github inside readme to work natively.It is extremely easy to do.Just follow what I did.
In the readme.md or anything.md file use
three back ticks and inside that write the way I did in this blog.

Installation

CDN
https://unpkg.com/mermaid@<version>/dist/
To select a version:

Replace with the desired version number.

Latest Version: https://unpkg.com/browse/mermaid@8.8.0/

Deploying Mermaid
To Deploy Mermaid:

You will need to install node v16, which would have npm
Download yarn using npm
Enter the following command: yarn add mermaid
You can then add mermaid as a dev dependency using this command: yarn add --dev mermaid
Mermaid API:
To deploy mermaid without a bundler, one can insert a script tag with an absolute address and a mermaidAPI call into the HTML like so:

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

Doing so will command the mermaid parser to look for the

tags with class="mermaid". From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.

Diagram Types

Flowchart

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

Sequence diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

Class Diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

EXPERIMENTAL TYPES

Git graph - experimental

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Entity Relationship Diagram -experimental

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Buy me a coffee