Créer une Arborescence de Site Web avec Mermaid

Qu’est-ce que Mermaid ?

Rôle

Mermaid est un langage de description de diagrammes en texte ayant vu le jour en 2016.

Il permet de créer des schémas (diagrammes de flux, organigrammes, cartes mentales, timelines, etc.) à partir de simples blocs de code.

L’idée est simple : vous écrivez une syntaxe lisible, et Mermaid se charge de générer un visuel clair et compréhensible.

Voici un exemple de schéma Mermaid :

flowchart TB
  A[Mon super Portfolio]
  A --> B[À propos]
  A --> C[Contact]
  A --> D[Projets]
  D -.-> E[Détails d'un projet]

Créé pour faciliter la documentation en normalisant les schémas, Mermaid a été adopté par de nombreux développeurs et équipes techniques.

Pourquoi utiliser Mermaid ?

De par sa nature de langage, Mermaid présente de nombreux avantages :

• Simplicité : on se concentre sur le fond et non la forme
• Uniformisation des schémas : les schémas sont constitués de blocs traduits en composants visuels par Mermaid
• Édition facilitée : on peut modifier le texte et le schéma s’adapte
• Intégration dans les environnements modernes : notamment GitHub, GitLab ou Notion
• Personnalisation des schémas : on peut ajouter des styles, des couleurs, des icônes, etc.

Plusieurs types de graphes

Mermaid ne se limite pas aux arborescences. Voici quelques exemples de diagrammes possibles :

• Flowchart : organigrammes et arborescences.
• Sequence diagram : interactions entre différents acteurs.
• Gantt chart : gestion de projet.
• State diagram : états et transitions d’un système.
• Mindmap : cartes mentales.
• Class diagram : modélisation de classes.
• Git graph : schéma illustrant l’historique d’un dépôt Git.
• Radar diagram : diagramme de radar.
• Pie chart : diagrammes de secteurs.
• Timeline : temporisation d’événements.
• Kanban board : tableau Kanban.
• ER diagram : modélisation des relations entre entités.
• Etc.

Dans cet article, on va se concentrer sur le flowchart, parfait pour représenter l’arborescence d’un site.

Arborescence avec Mermaid : syntaxe de base

Afin de visualiser au mieux les schémas mermaid décrits dans cet article, je vous invite à les tester directement sur mermaid.live, l’éditeur officiel pour créer des schémas Mermaid.

1. Type de diagramme

Un schéma Mermaid commence toujours par définir le type de diagramme.

Pour une arborescence, on utilise la famille des diagrammes de type flowchart (ou « organigramme » en français), pour lesquels la direction est définie par TD (Top Down).

flowchart TB

• flowchart : indique qu’on veut un organigramme.
• TB : signifie Top Bottom (haut → bas).

2. Créer un bloc (nœud)

Chaque page de notre arborescence sera représentée par un bloc, aussi appelé nœud.

Un bloc est caractérisé par son identifiant et le texte qu’il contient, déclaré entre deux crochets [] ou parenthèses ().

flowchart TB
  A[laconsole.dev]

Selon les caractères utilisés, le bloc sera affiché différemment :

• [] : bloc rectangulaire standard.
• () : bloc rectangulaire arrondi.

Mermaid supporte la saisie de texte en markdown, à condition que le texte du bloc soit entouré de double quote "". Cela permet ainsi de mettre en gras, en italique, etc.

flowchart TB
  A["Je suis en **gras**"]
  B["Je suis en *italique*"]

3. Flèches / liens

Pour relier les pages d’une arborescence, on utilise des flèches ou lignes :

flowchart TB
  A[Mon super Portfolio] --> B[À propos]
  A --> C[Contact]
  A --> D[Projets]
  D -.-> E[Détails d'un projet]

Voici les différents types de flèches disponibles :

• --> : flèche simple.
• --- : ligne sans flèche.
• -.-> : flèche en pointillés.

flowchart TB
  A[Mon super Portfolio]
  B[À propos]
  C[Contact]
  D[Projets]
  E[Détails d'un projet]

  A --> B
  A --> C
  A --> D
  D -.-> E

4. Bonus : sous-graphes

Si vous voulez représenter des sous-parties visant à regrouper des blocs, cela se fera entre les instructions subgraph et end.

Cela peut par exemple être utile pour rassembler des pages partageant des caractéristiques communes (authentification, admin, etc.).

flowchart TB
  A[Mon super Portfolio] --> B[À propos]
  A --> C[Contact]
  A --> D[Projets]
  D -.-> E[Détails d'un projet]
  A --> F[Gestion des Projets]
  F --> G[Ajouter]
  F --> H[Supprimer]
  F --> I[Modifier]

  subgraph Admin
    F
    G
    H
    I
  end

Résultat : vos pages sont regroupées dans un cadre Admin, ce qui renforce la lisibilité de votre arborescence.

Customiser ses diagrammes

Vous souhaitez personnaliser l’apparence de votre arborescence Mermaid ? Bonne nouvelle, Mermaid propose tout un système de thèmes.