Cet article explique comment intégrer des diagrammes Mermaid dans vos pages.

Qu’est-ce que Mermaid ?

Mermaid est une bibliothèque JavaScript qui permet de créer des diagrammes à partir de texte simple. Elle prend en charge différents types de diagrammes, tels que les diagrammes de flux, les diagrammes de séquence, les diagrammes de classe, etc. Mermaid est particulièrement utile pour les développeurs et les équipes techniques qui souhaitent documenter leurs projets de manière visuelle.

Intégrer un diagramme Mermaid

Pour activer mermaid pour une page, il faut mettre mermaid: true dans le front matter de votre page. Par exemple, cette page a le front matter suivant:

---
title: "Diagrammes avec Mermaid"
summary: "Guide pour intégrer des diagrammes Mermaid dans les pages de votre site Hugo."
weight: 8
tags:
  - "Diagrammes"
  - "Mermaid"
mermaid: true
---

Ensuite, vous pouvez utiliser le shortcode mermaid pour ajouter du contenu mermaid. Par exemple:

{{< mermaid align="center">}}
  # Votre contenu mermaid ici
{{< /mermaid >}}

Le shortcode mermaid accepte les paramètres suivants:

  • align: aligne votre diagramme à gauche, à droite, ou au centre. L’alignement par défaut est le centre.
  • background: change la couleur d’arrière plan de votre diagramme.

De plus, vous pouvez également personnaliser le thème de vos diagrammes, par exemple:

{{< mermaid align="center" >}}
%%{init: {'theme':'default'}}%%
  # your mermaid content here
{{< mermaid >}}

Le paramètre theme accepte les valeurs suivantes:

  • default
  • neutral
  • dark
  • forest
  • base

Exemples

Voici quelques exemples de différents diagrammes utilisant mermaid.

Logigramme

Code :

{{< mermaid align="left" >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

Résultat :

graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

Machine d’état

Code :

{{< mermaid >}}
stateDiagram-v2
  ID_RR_EX: ID + RR + EX
  ID_RR_EX --> MA_IF: memory_access
  ID_RR_EX --> WB_IF: !memory_access

  WB_IF: WB + IF
  WB_IF --> ID_RR_EX

  MA_IF: MA + IF
  MA_IF --> WB_IF: store_acess
  MA_IF --> ID_RR_EX: !store_access
{{< /mermaid >}}

Résultat :

stateDiagram-v2 ID_RR_EX: ID + RR + EX ID_RR_EX --> MA_IF: memory_access ID_RR_EX --> WB_IF: !memory_access WB_IF: WB + IF WB_IF --> ID_RR_EX MA_IF: MA + IF MA_IF --> WB_IF: store_acess MA_IF --> ID_RR_EX: !store_access

Diagramme de séquence

Code :

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
{{< /mermaid >}}

Résultat :

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Diagramme de Gantt

Code :

{{< mermaid >}}
gantt
  dateFormat  YYYY-MM-DD
  title Adding GANTT diagram to mermaid
  excludes weekdays 2026-01-10

section A section
  Completed task            :done,    des1, 2026-01-06,2026-01-08
  Active task               :active,  des2, 2026-01-09, 3d
  Future task               :         des3, after des2, 5d
  Future task2               :         des4, after des3, 5d
{{< /mermaid >}}

Résultat :

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2026-01-10 section A section Completed task :done, des1, 2026-01-06,2026-01-08 Active task :active, des2, 2026-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

Diagramme de classes

Code :

{{< mermaid >}}
classDiagram
  Class01 <|-- AveryLongClass : Cool
  Class03 *-- Class04
  Class05 o-- Class06
  Class07 .. Class08
  Class09 --> C2 : Where am i?
  Class09 --* C3
  Class09 --|> Class07
  Class07 : equals()
  Class07 : Object[] elementData
  Class01 : size()
  Class01 : int chimp
  Class01 : int gorilla
  Class08 <--> C2: Cool label
{{< /mermaid >}}

Résultat :

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Graphique Git

Code :

{{< mermaid background="black" align="center" >}}
%%{init: { 'themeVariables': {
           'commitLabelColor': '#000000',
           'commitLabelFontSize': '12px'
  } } }%%
gitGraph:
  commit
  branch newbranch
  checkout newbranch
  commit
  commit
  branch master
  checkout master
  commit
  commit
  merge newbranch
{{< /mermaid >}}

Résultat :

%%{init: { 'themeVariables': { 'commitLabelColor': '#000000', 'commitLabelFontSize': '12px' } } }%% gitGraph commit branch newbranch checkout newbranch commit commit branch master checkout master commit commit merge newbranch

Diagramme ER

Code :

{{< mermaid >}}
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}

Résultat :

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses