DevToy

Diagrammes Mermaid

Organigrammes Mermaid : nœuds, décisions, libellés et direction

Construire des organigrammes lisibles avec des ID stables, une direction explicite, des branches nommées et des contrôles de syntaxe.

Publié 11 juillet 2026 · Mis à jour 11 juillet 2026

Un organigramme Mermaid est un modèle textuel de nœuds et d’arêtes. flowchart TD va de haut en bas et flowchart LR de gauche à droite. Choisissez la direction selon le récit, pas seulement selon l’espace disponible.

Séparer identité et libellé du nœud

Utilisez un ID court et stable et un texte lisible entre crochets :

flowchart LR
  request[Recevoir la demande] --> validate{Entrée valide ?}
  validate -->|Oui| process[Traiter la commande]
  validate -->|Non| reject[Retourner les erreurs]

Les arêtes utilisent validate ; son libellé peut changer sans réécrire les connexions. Des ID stables facilitent aussi les styles et la revue des diffs.

Nommer les branches de décision

Un losange sans libellés oblige à deviner. Ajoutez des textes courts avec -->|Libellé| et restez cohérent : mélanger true/false, oui/non et succès/échec augmente l’effort mental.

Utiliser des sous-graphes pour les frontières

flowchart LR
  subgraph Navigateur
    edit[Modifier la source] --> render[Rendre le diagramme]
  end
  subgraph StockageLocal
    draft[(Brouillon)]
  end
  edit --> draft

Les frontières montrent responsabilité, confiance, déploiement ou cycle de vie. N’enveloppez pas chaque paire de nœuds.

Éviter les surprises du parseur

Commencez par un diagramme minimal et ajoutez une instruction à la fois. Mettez entre guillemets les libellés contenant une ponctuation ambiguë. end en minuscules a un rôle spécial ; choisissez un autre libellé. Surveillez aussi o et x après certaines arêtes.

Concevoir pour les changements

Séparez vue d’ensemble et processus détaillés, réduisez les croisements et gardez un niveau d’abstraction cohérent. Testez avec l’éditeur Mermaid local, qui vérifie la version fournie par le site.

Guides associés