Diagrams and Charts

Using Mermaid Code Block

1```mermaid
2graph TD;
3    A-->B;
4    A-->C;
5    B-->D;
6    C-->D;
7```

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

Using Mermaid Shortcode

 1{{< mermaid >}}
 2sequenceDiagram
 3    participant Alice
 4    participant Bob
 5    Alice->>John: Hello John, how are you?
 6    loop Healthcheck
 7        John->>John: Fight against hypochondria
 8    end
 9    Note right of John: Rational thoughts <br/>prevail!
10    John-->>Alice: Great!
11    John->>Bob: How about you?
12    Bob-->>John: Jolly good!
13{{< /mermaid >}}

	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!
	

Further Reading

• Mermaid official site
• Hugo Mermaid module