Generate Diagram as Code using Mermaid

I this tutorial, I am going to show how diagram can be drawn using code. The program I am going to use is called Mermaid

Marmaid Basic

Let’s learn about some of the basic syntax. For practicing, once can use Mermaid Live Editor

A Node (default)

flowchart LR
  id

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

graph LR; id

It is possible to create box with text as well.

  ```mermaid
    flowchart LR
     id[Test inside the box]
  ```

graph LR; id[Hello! My name is Blue!]

    flowchart LR
     A(A) --> B{B};
     B --> c[C];
     c -->a(D);
     a -->b{E};
     b -->x[F];
     x --> u(G);
     u --> y{H};
     y --> z[I]

graph LR; A(A) --> B{B}; B --> c[C]; c -->a(D); a -->b{E}; b -->x[F]; x --> u(G); u --> y{H}; y --> z[I]

Note: Marmain flowchart is not redening in the jekyll or gh-pages. You need to use graph