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

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