Le format Mermaid

mermaid

Comprendre le format Mermaid : Créez des diagrammes avec du texte

Mermaid est un outil de création de diagrammes et de graphiques qui fonctionne directement dans votre navigateur ou votre éditeur de texte. Au lieu de dessiner avec une souris (comme dans PowerPoint ou Visio), vous écrivez du code simple sous forme de texte, et Mermaid le transforme automatiquement en image visuelle.

C'est l'équivalent du Markdown pour les diagrammes : simple, léger et facile à modifier.

À quoi cela sert-il ?

L'objectif principal est de documenter visuellement des idées complexes sans avoir besoin de logiciels de dessin dédiés. C'est particulièrement utile pour :

Les développeurs : Pour modéliser des flux de données, des architectures logicielles ou des séquences d'appels API directement dans la documentation technique (comme les fichiers README.md sur GitHub).
Les chefs de projet : Pour créer rapidement des diagrammes de Gantt (planning) ou des organigrammes.
La collaboration : Comme le diagramme est du texte, il peut être versionné avec Git, comparé (diff) et modifié par plusieurs personnes sans conflits de fichiers binaires.

Les instructions essentielles

Tout diagramme Mermaid commence par la déclaration du type de graphique, suivi des éléments et de leurs relations. Voici les trois types les plus courants :

1. Le Diagramme de Flux (Flowchart)

Utilisé pour représenter un processus, une décision ou un cheminement.

Syntaxe de base : A --> B (A va vers B).
Formes : A[Texte] (rectangle), B(Texte) (ronde), C{Texte} (losange/décision).

flowchart TD
    A[Début] --> B{Est-ce validé ?}
    B -- Oui --> C[Fin réussie]
    B -- Non --> D[Corriger]
    D --> B

2. Le Diagramme de Séquence (Sequence Diagram)

Idéal pour montrer comment différents acteurs (systèmes, personnes) interagissent dans le temps.

Syntaxe de base : Acteur1->>Acteur2 : Message.
Acteurs : Définis avec participant ou automatiquement lors du premier appel.

sequenceDiagram
    participant Client
    participant Serveur
    participant BaseDeDonnées

    Client->>Serveur : Requête de connexion
    Serveur->>BaseDeDonnées : Vérifier identifiants
    BaseDeDonnées-->>Serveur : OK
    Serveur-->>Client : Connexion réussie

3. Le Diagramme de Classes (Class Diagram)

Utilisé en conception objet pour montrer la structure des classes, leurs attributs et leurs méthodes.

classDiagram
    class Vehicule {
        +String marque
        +rouler()
    }
    class Voiture {
        +Int nombrePortes
        +klaxonner()
    }
    Vehicule <|-- Voiture

On peut également créer cartes mentales, organigrammes, et bien d'autres (voir pour cela la rubrique "Exemples" du site mermaid.live)

Où trouver la documentation ?

La référence officielle et la plus à jour est le site de la communauté Mermaid. Elle contient un "Live Editor" qui vous permet de tester du code et de voir le résultat en temps réel, ce qui est la meilleure façon d'apprendre.

Site officiel : mermaid.js.org
Éditeur en ligne (pour tester) : mermaid.live
Pour visualiser et exporter en format image (JPG, PNG, SVG) : Online Mermaid Viewer

Vous pouvez également trouver de nombreux exemples intégrés directement dans la documentation de GitHub, GitLab ou Obsidian, qui supportent nativement ce format.