Mermaid Diagrams

Demo Time supports Mermaid diagrams, allowing you to create flowcharts, sequence diagrams, and more directly in your slides.

Tip

Read the Mermaid documentation for more information on how to use it.

Basic Usage

To create a Mermaid diagram, use the mermaid code block syntax:

Basic Mermaid Diagram

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

Multiple Diagrams

You can display multiple diagrams side by side using flexbox:

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">

```mermaid
classDiagram
    class Animal
    class Car
    Animal --> Car
```

```mermaid
classDiagram
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}
```

</div>