Aide-mémoire de la syntaxe mermaid

Le plus petit diagramme qui fonctionne

Un flowchart nécessite une ligne de déclaration et une flèche. TD signifie de haut en bas ; utilisez LR pour un sens gauche-droite, mieux adapté aux processus larges.

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A, B et C sont des identifiants de nœuds — des noms internes, jamais affichés. Le texte entre crochets est le libellé, et le style des crochets détermine la forme.

Formes de nœuds

La forme est choisie par la paire de délimiteurs autour du libellé. Voici celles à retenir :

💡Mettez le libellé entre guillemets s'il contient des crochets, deux-points ou guillemets : A["Load (raw) data"]. Sans guillemets, l'analyseur interprète votre ponctuation comme de la syntaxe.

Flèches

La longueur de la flèche a aussi un sens : --> correspond à un rang, ---> pousse la cible un rang plus loin. C'est le contrôle de mise en page le plus simple que mermaid vous offre.

Regrouper avec des sous-graphes

Un subgraph dessine un cadre étiqueté autour de nœuds. Les sous-graphes s'imbriquent, et les flèches peuvent librement traverser leurs bordures.

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

Couleur et style

style colore un seul nœud. classDef associé à class en colore un ensemble, ce qu'il vous faut au-delà de trois ou quatre nœuds.

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

Les couleurs font partie de la source du diagramme, elles survivent donc à l'export et voyagent avec le fichier. Rien ici ne dépend d'un paramètre de thème de l'outil qui l'affiche.

Un exemple par type de diagramme

Diagramme de séquence

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

Diagramme de classes

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

Diagramme d'état

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

Diagramme entité-relation

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

Diagramme de Gantt

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

Où mermaid s'affiche tout seul

• GitHub — un bloc ```mermaid s'affiche dans les issues, les pull requests, les commentaires et les fichiers README.
• GitLab — le même bloc, dans les issues, les merge requests et le wiki.
• Notion — un bloc de code avec le langage réglé sur Mermaid s'affiche à côté de la source.
• Obsidian — un bloc mermaid s'affiche en mode aperçu.
• Sites de documentation — Docusaurus, MkDocs Material et VitePress prennent tous en charge les blocs mermaid.

C'est la vraie raison de garder les diagrammes en mermaid plutôt qu'en images : le diagramme vit dans le même fichier texte que ce qu'il décrit, et une revue de code peut voir ce qui y a changé.