Éditeur et générateur de diagrammes Mermaid en direct

Transformez du texte en diagramme avec l’éditeur ci-dessous. Le guide et ses exemples vous aident à choisir une représentation pour un processus, une explication technique ou un planning.

Qu’est-ce que Mermaid ?

Mermaid  (en anglais) est un langage de description de diagrammes accompagné d’un moteur de rendu : vous décrivez des étapes, des personnes ou des relations en texte, puis il dessine le diagramme. Par exemple, Review --> Publish relie deux nœuds par une flèche. Vous définissez les relations ; Mermaid calcule la disposition.

Cette approche est souvent appelée diagrammes sous forme de code. La source est du texte ordinaire, que vous pouvez rechercher, copier et versionner avec le document qu’elle explique. Il n’est pas nécessaire d’écrire du JavaScript. Mermaid dessine ce que vous décrivez ; il n’analyse pas votre application et ne vérifie pas qu’un processus est correct.

Choisir un diagramme selon la question à résoudre

Un diagramme utile a un objectif précis. Déterminez ce que le lecteur doit comprendre avant de choisir les formes ou les couleurs.

Pour d’autres besoins, une carte mentale peut organiser des idées, une chronologie résumer des événements et un graphe Git expliquer une stratégie de branches. Consultez la présentation de la syntaxe Mermaid  (en anglais) pour explorer d’autres familles. Chacune possède sa propre grammaire : modifier seulement la première ligne ne convertit pas un diagramme dans un autre format.

Cinq exemples à adapter

Chaque onglet contient un diagramme complet et explique un choix de modélisation. Copiez le code dans un éditeur Mermaid pour le visualiser ; la déclaration du type appartient à la source, mais pas les accents graves qui délimitent un bloc Markdown. Les mots-clés Mermaid restent en anglais, tandis que les libellés peuvent être en français.

flowchart TD
    Submit["Envoyer la note de frais"] --> Check{"Justificatif joint ?"}
    Check -->|Oui| Review["Examen par le responsable"]
    Check -->|Non| Fix["Joindre le justificatif"]
    Fix --> Check
    Review --> Decision{"Demande acceptée ?"}
    Decision -->|Oui| Pay["Rembourser le salarié"]
    Decision -->|Non| Reject["Expliquer le refus"]

sequenceDiagram
    participant Browser as Navigateur
    participant API
    participant Cache
    participant DB as Base de données
    Browser->>API: GET /products/42
    API->>Cache: Chercher le produit 42
    alt Présent en cache
        Cache-->>API: Produit
    else Absent du cache
        Cache-->>API: Introuvable
        API->>DB: Lire le produit 42
        DB-->>API: Produit
        API->>Cache: Mémoriser le produit
    end
    API-->>Browser: 200 OK avec le produit

stateDiagram-v2
    state "Ouvert" as Open
    state "En cours" as InProgress
    state "En attente" as Waiting
    state "Résolu" as Resolved
    state "Fermé" as Closed
    [*] --> Open
    Open --> InProgress: Attribuer
    InProgress --> Waiting: Demander des précisions
    Waiting --> InProgress: Recevoir la réponse
    InProgress --> Resolved: Fournir une solution
    Resolved --> Open: Rouvrir
    Resolved --> Closed: Confirmer la résolution
    Closed --> [*]

erDiagram
    CLIENT ||..o{ COMMANDE : passe
    COMMANDE ||--|{ LIGNE_COMMANDE : contient
    CLIENT {
        int id PK
        string email
    }
    COMMANDE {
        int id PK
        int client_id FK
    }
    LIGNE_COMMANDE {
        int commande_id PK, FK
        int numero_ligne PK
        int quantite
    }

gantt
    title Publication de la documentation
    dateFormat YYYY-MM-DD
    excludes weekends
    section Préparation
    Plan          :outline, 2026-11-02, 2d
    Rédaction     :draft, after outline, 3d
    section Publication
    Relecture     :review, after draft, 2d
    Publication   :milestone, after review, 0d

Les avantages de Mermaid et ses limites

Mermaid convient bien aux diagrammes qui évoluent avec une spécification, un article d’assistance ou un projet logiciel :

• Les changements se relisent. Une comparaison de versions peut montrer qu’une étape ou une relation a changé. Écrivez une relation par ligne pour faciliter cette relecture.
• La source reste près de l’explication. Conservez le diagramme avec le document et relisez-les dans la même modification. Cela facilite la maintenance, sans garantir une mise à jour automatique.
• La disposition demande moins de travail. Le placement automatique est pratique pour de petits processus ou échanges, notamment lorsque les libellés changent souvent.

Les contreparties comptent tout autant :

• Le placement précis est limité. Ajouter une connexion peut réorganiser le dessin. Si l’espacement exact, les annotations à main levée ou une composition graphique soignée sont prioritaires, un outil de dessin visuel sera généralement plus adapté.
• La syntaxe s’apprend. Une ponctuation manquante ou la syntaxe d’une autre famille peut empêcher le rendu. Partez d’un exemple fonctionnel et ajoutez une idée à la fois.
• Les grands diagrammes deviennent difficiles à lire. L’accumulation de nœuds et de croisements peut masquer le message malgré une source valide. Séparez la vue d’ensemble des processus détaillés plutôt que de tout réduire sur une page.
• La portabilité se vérifie. Une plateforme documentaire peut utiliser une autre version de Mermaid ou une configuration différente. Testez sur la destination, surtout avec une syntaxe récente, des icônes ou des styles.

Intégrer un diagramme dans un README ou un document

Sur une plateforme compatible, placez la source dans un bloc Markdown délimité et étiqueté mermaid :

```mermaid
flowchart LR
    Draft["Brouillon"] --> Review["Relecture"] --> Publish["Publication"]
```

Le guide des diagrammes de GitHub  explique où les utiliser et comment vérifier la version de Mermaid. D’autres systèmes Markdown nécessitent un module complémentaire ; un bloc de code ne suffit pas à faire dessiner le diagramme par tous les moteurs.

Pour une présentation ou un document sans prise en charge de Mermaid, insérez une image et conservez sa source à côté. L’image est un instantané : modifier la source ne met pas à jour une image déjà insérée. Vérifiez le résultat à sa taille finale, car les longs libellés et les petits caractères peuvent devenir illisibles.

Rendre le diagramme utile à ses lecteurs

Définissez son périmètre : “Traitement d’une absence en cache” renseigne mieux que “Architecture du système” pour l’exemple d’API ci-dessus. Utilisez des verbes pour les actions, des noms pour les entités et des libellés sur les chemins de décision. Incluez le scénario d’échec ou de reprise dont les lecteurs auront le plus besoin.

Expliquez les règles importantes dans le texte voisin et ne faites pas de la couleur le seul moyen de distinguer les résultats. Les options d’accessibilité de Mermaid  (en anglais) comprennent accTitle et accDescr pour un titre et une description accessibles. Si vous publiez une image, ajoutez aussi un texte alternatif adapté dans le document de destination ; un PNG ne conserve pas la structure d’accessibilité du SVG Mermaid.