Mermaid

Guide to integrate Mermaid content into your training course.

In the WYSIWYG editor, you can write Mermaid code. Currently the preview of Mermaid diagrams is not available directly in the editor, but you can view the result on the mobile app or the preview. To get a real-time preview of you diagrams, use the online editor providedd by Mermaid.

Basic syntax

To insert a Mermaid diagram, use a dedicated code block with the following syntax:

```mermaid
Your mermaid code here
```

Diagram example

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
```