Diagrams with Mermaid

Using Mermaid

Mermaid is a tool that turns text into diagrams, such as flowcharts, sequence diagrams, and class diagrams.

I use Mermaid to explain flows and structures visually, without needing images.

How it is configured in the project

The astro-mermaid plugin is configured in astro.config.mjs, before starlight:

import mermaid from 'astro-mermaid';

integrations: [
  mermaid({
    theme: 'neutral',
    autoTheme: true,
  }),
  starlight({ /* ... */ }),
],

theme: 'neutral': base theme of the diagrams.
autoTheme: true: the diagram automatically changes color when we switch between the light and dark themes.

Creating a diagram

No import is needed. Just create a code block with the mermaid language:

```mermaid
graph TD
    A[Start] --> B{Did it work?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Result:

graph TD
    A[Start] --> B{Did it work?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

Flowchart direction

After graph we indicate the direction:

Code	Direction
`TD` or `TB`	Top to bottom
`BT`	Bottom to top
`LR`	Left to right
`RL`	Right to left

graph LR
    A[Code] --> B[Build] --> C[Deploy]

Sequence diagram

Useful to show the communication between systems:

```mermaid
sequenceDiagram
    participant U as User
    participant API
    participant DB as Database
    U->>API: GET /products
    API->>DB: SELECT * FROM products
    DB-->>API: Result
    API-->>U: 200 OK
```

sequenceDiagram
    participant U as User
    participant API
    participant DB as Database
    U->>API: GET /products
    API->>DB: SELECT * FROM products
    DB-->>API: Result
    API-->>U: 200 OK

Class diagram

Useful for object-oriented programming studies:

```mermaid
classDiagram
    class Animal {
        +string Name
        +Speak()
    }
    class Dog {
        +Speak()
    }
    Animal <|-- Dog
```

classDiagram
    class Animal {
        +string Name
        +Speak()
    }
    class Dog {
        +Speak()
    }
    Animal <|-- Dog

Other types of diagrams

Mermaid supports several other types, such as stateDiagram-v2, erDiagram, gantt, pie, and journey.