Flowchartio
Se connecterEssayer gratuitementEssayer

Diagrammes Mermaid

Aide-mémoire de la syntaxe Mermaid pour les logigrammes

Un logigramme Mermaid commence par « flowchart » et une direction (TD, LR…), déclare des nœuds avec un identifiant et une forme, comme A[Étape] ou B{Question ?}, puis les relie par des flèches comme A --> B ou B -->|Oui| C.

Par Flowchartio · Mis à jour le · 2 min de lecture

La direction

La première ligne fixe le type et la direction :

  • flowchart TD ou flowchart TB : de haut en bas
  • flowchart LR : de gauche à droite
  • flowchart BT et flowchart RL : sens inverses

L’ancien mot-clé graph fonctionne toujours, mais flowchart est le mot-clé actuel.

Les formes des nœuds

Un nœud est un identifiant suivi d’une forme. L’identifiant sert dans les flèches ; le texte est ce qui s’affiche.

flowchart TD
  A[Rectangle : une étape]
  B(Rectangle arrondi)
  C([Stade : début ou fin])
  D[[Sous-programme : processus prédéfini]]
  E[(Base de données)]
  F((Cercle))
  G{Losange : une décision ?}
  H{{Hexagone}}
  I[/Parallélogramme : entrée ou sortie/]

Elles correspondent de près aux symboles classiques du logigramme : stade pour le début et la fin, rectangle pour les étapes, losange pour les décisions, parallélogramme pour les entrées et sorties.

Flèches et étiquettes

  • A --> B : flèche
  • A --- B : trait sans pointe
  • A -.-> B : flèche en pointillés
  • A ==> B : flèche épaisse
  • A -->|Oui| B ou A -- Oui --> B : flèche étiquetée
  • A --> B --> C : enchaînement
  • A & B --> C : plusieurs sources à la fois

Identifiants et libellés

Gardez des identifiants courts et stables (verif, paiement) et mettez le libellé lisible entre crochets. Renommer un libellé ne casse alors jamais les flèches qui pointent vers le nœud.

Caractères spéciaux et accents

Les accents passent sans problème. Mettez le texte entre guillemets doubles quand il contient des crochets, des parenthèses ou d’autres symboles : A["Contrôle (manuel)"]. Dans des guillemets, un guillemet double s’écrit #quot;.

Commentaires

Les lignes qui commencent par %% sont ignorées : %% À FAIRE : ajouter la branche remboursement.

Erreurs courantes

  • Le mot « end » en minuscules comme texte de nœud peut casser un logigramme, car end ferme les sous-graphes. Écrivez « End » ou mettez-le entre guillemets.
  • Un identifiant qui commence par « o » ou « x » juste après un lien, comme A---oB, crée une terminaison ronde ou en croix. Ajoutez un espace ou renommez le nœud.
  • Des parenthèses ou crochets sans guillemets dans le texte perturbent l’analyse.
  • Un identifiant réutilisé avec une autre forme : la première déclaration l’emporte.

Un exemple complet

flowchart TD
  debut([Note de frais déposée]) --> valid[Le manager valide]
  valid --> seuil{Plus de 500 € ?}
  seuil -->|Oui| cdg[Contrôle de gestion]
  seuil -->|Non| rembourse[Comptabilité rembourse]
  cdg --> rembourse
  rembourse --> fin([Fin])

Pour regrouper les étapes par service, poursuivez avec sous-graphes et styles. Pour publier le résultat, voir Mermaid sur GitHub et GitLab.