Diagrammes Mermaid

Créez des diagrammes directement dans votre documentation en utilisant les blocs de code mermaid. Les diagrammes sont rendus côté client avec Mermaid et s’adaptent automatiquement aux modes clair et sombre.

Utilisation de base

```mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

Rendu :

graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]

Exemples

Diagramme de séquence

```mermaid
sequenceDiagram
  participant Client
  participant Server
  participant Database
  Client->>Server: HTTP Request
  Server->>Database: Query
  Database-->>Server: Result
  Server-->>Client: JSON Response
```

sequenceDiagram
  participant Client
  participant Server
  participant Database
  Client->>Server: HTTP Request
  Server->>Database: Query
  Database-->>Server: Result
  Server-->>Client: JSON Response

Diagramme de classes

```mermaid
classDiagram
  class Animal {
    +String name
    +int age
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +purr()
  }
  Animal <|-- Dog
  Animal <|-- Cat
```

classDiagram
  class Animal {
    +String name
    +int age
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +purr()
  }
  Animal <|-- Dog
  Animal <|-- Cat

Graphe Git

```mermaid
gitGraph
  commit
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit
```

gitGraph
  commit
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit

Mode sombre

Les diagrammes Mermaid basculent automatiquement entre les thèmes default et dark en fonction du mode de couleur actuel. Aucune configuration supplémentaire n’est nécessaire.

Fonctionnement

Le plugin remark remarkCodeBlocks intercepte les blocs de code avec mermaid comme langage avant que Shiki ne les traite. La définition du diagramme est transmise à un composant React MermaidBlock hydraté avec client:load. Au montage, il importe dynamiquement la bibliothèque Mermaid, effectue le rendu du diagramme en SVG et l’affiche. Un élément <pre> est affiché comme placeholder avant l’hydratation.