Mermaid on työkalu, jolla voi kuvata ja tuottaa kaavioita kirjoittamalla yksinkertaista tekstipohjaista kuvauskieltä. Markdown-esikatselin muuntaa kuvauksen automaattisesti kaavioksi.

GitHub tunnistaa Markdown-tiedoston mermaid-koodilohkot ja näyttää niiden sisällön kaavioina automaattisesti. Markdown-tiedostoon ei tarvitse lisätä JavaScriptiä, koska GitHub huolehtii kaavion renderöinnistä omassa käyttöliittymässään.

```mermaid
classDiagram
    class Person
```

• Luokkakaavio (Class Diagram)
• Sekvenssikaavio (Sequence Diagram)
• Käyttötapauskaavio (Flowchart tai User Journey)
• Tilakaavio (State Diagram)
• Toimintokaavio (Flowchart)
• Komponentti- ja sijoittelukaaviot (C4, Architecture)

• Nopea: kaaviot syntyvät tekstistä ja ne on helppo versioida.
• Yhteensopiva: toimii Markdownissa ja monissa editoreissa.
• Ylläpidettävä: muutokset onnistuvat ilman erillistä piirto-ohjelmaa.

1. Kirjoita kaavion kuvaus Mermaid-kielellä Markdown-tiedostoon.
2. Rajaa kuvaus mermaid-koodilohkolla.
3. Avaa tiedosto Mermaid-tukea käyttävässä Markdown-esikatselussa.
4. Esikatselin muodostaa kuvauksesta kaavion automaattisesti.

Kirjoitetaan seuraava koodi Markdown-tiedostoon:

```mermaid
flowchart LR
    User[User] --> Login((Login))
```

Markdown-esikatselu näyttää koodin kaaviona:

flowchart LR
    User[User] --> Login((Login))

Esimerkki 1: luokka

Koodi:

```mermaid
classDiagram
    class Student {
        -string firstname
        -string lastname
        +setFirstname(string fname) void
        +getFirstname() string
    }
```

Kaavio:

classDiagram
    class Student {
        -string firstname
        -string lastname
        +setFirstname(string fname) void
        +getFirstname() string
    }

Esimerkki 2: assosiaatio

Koodi:

```mermaid
classDiagram
    class Doctor
    class Patient
    Doctor "1" -- "n" Patient : diagnose
```

Kaavio:

classDiagram
    class Doctor
    class Patient
    Doctor "1" -- "n" Patient : diagnose

Esimerkki 3: aggregaatio

Koodi:

```mermaid
classDiagram
    class Team
    class Player
    Team "1" o-- "many" Player : has
```

Kaavio:

classDiagram
    class Team
    class Player
    Team "1" o-- "many" Player : has

Esimerkki 4: kompositio

Koodi:

```mermaid
classDiagram
    class Car
    class Engine
    Car *-- Engine : contains
```

Kaavio:

classDiagram
    class Car
    class Engine
    Car *-- Engine : contains

Esimerkki 5: perintä

Koodi:

```mermaid
classDiagram
    class Person
    class Student
    Person <|-- Student
```

Kaavio:

classDiagram
    class Person
    class Student
    Person <|-- Student

Esimerkki 6: perintä ja kooste

Koodi:

```mermaid
classDiagram
    class Person {
        -int age
        -string name
        +Person()
        +getAge() int
        +getName() string
        +setAge(int) void
        +setName(string) void
    }
    class Student {
        -string groupName
        +Student()
        +getGroupName() string
        +setGroupName(string) void
    }
    class Teacher {
        -string department
        +Teacher()
        +getDepartment() string
        +setDepartment(string) void
    }
    class Classroom {
        -Student objectStudent1
        -Student objectStudent2
        -Teacher objectTeacher
        -string classRoomName
        +Classroom()
        +getClassRoomName() string
        +setClassRoomName(string) void
        +setClassRoomPersons() void
        +showClassRoomData() void
    }
    Person <|-- Student
    Person <|-- Teacher
    Classroom *-- Student : contains
    Classroom *-- Teacher : contains
```

Kaavio:

classDiagram
    class Person {
        -int age
        -string name
        +Person()
        +getAge() int
        +getName() string
        +setAge(int) void
        +setName(string) void
    }
    class Student {
        -string groupName
        +Student()
        +getGroupName() string
        +setGroupName(string) void
    }
    class Teacher {
        -string department
        +Teacher()
        +getDepartment() string
        +setDepartment(string) void
    }
    class Classroom {
        -Student objectStudent1
        -Student objectStudent2
        -Teacher objectTeacher
        -string classRoomName
        +Classroom()
        +getClassRoomName() string
        +setClassRoomName(string) void
        +setClassRoomPersons() void
        +showClassRoomData() void
    }
    Person <|-- Student
    Person <|-- Teacher
    Classroom *-- Student : contains
    Classroom *-- Teacher : contains

Mermaid-kaavioita voi näyttää myös HTML-sivulla. Tällöin sivulle lisätään kaavion kuvaus <pre class="mermaid">-elementin sisään ja ladataan Mermaidin JavaScript-kirjasto. Selain suorittaa JavaScriptin ja muuntaa kuvauksen SVG-kaavioksi.

<pre class="mermaid">
flowchart LR
    User[User] --> Login((Login))
</pre>

<script type="module">
    import mermaid from
        'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>