How to draw graph in github readme with code
Tags: github, markdown, tutorial, productivity
Published: 2022-03-15 10:45:14

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 <version> 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 <div> 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;
```

![a](https://mermaid-js.github.io/mermaid/img/flow.png)

**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!
```

![b](https://mermaid-js.github.io/mermaid/img/sequence.png)

**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
```

![c](https://mermaid-js.github.io/mermaid/img/gantt.png)

**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
```

![d](https://mermaid-js.github.io/mermaid/img/class.png)

##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
```

![e](https://mermaid-js.github.io/mermaid/img/git.png)

**Entity Relationship Diagram -experimental**

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

![f](https://mermaid-js.github.io/mermaid/img/simple-er.png)

**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
```

![g](https://mermaid-js.github.io/mermaid/img/user-journey.png)
[Buy me a coffee](https://www.buymeacoffee.com/tawhid)