Mermaid

Diagrams with mermaid, make sure it is enabled in the _config.yml. Here is a simple example:

<!-- To generate a diagram -->
<div class="mermaid">
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
</div>

💡 Now render also work with the GitHub markdown highlight.

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

That will be rendered into this:

You can also go with more complex features and diagrams from the documentation, and try it out with the live editor.

SequenceDiagram

Flow

Class

State

ER

Gantt

User Journey

Git

Pie

Mindmap

QuadrantChart

XYChart