Sous-graphes et styles dans Mermaid

Les sous-graphes

Un sous-graphe encadre un groupe de nœuds et lui donne un titre :

flowchart TD
  subgraph client["Client"]
    A([Déposer le dossier])
  end
  subgraph conseiller["Conseiller"]
    B[Vérifier le dossier]
    C{Complet ?}
  end
  subgraph backoffice["Back-office"]
    D[Contrôles KYC]
  end
  A --> B --> C
  C -->|Non| A
  C -->|Oui| D

Les nœuds déclarés dans un sous-graphe lui appartiennent. Les flèches peuvent être déclarées n’importe où, et l’on peut aussi relier directement l’identifiant d’un sous-graphe.

Imiter des couloirs

Mermaid n’a pas de diagramme en couloirs dédié, mais un sous-graphe par responsable donne un résultat proche et conserve l’information essentielle d’un logigramme en couloirs : qui fait chaque étape. L’export Mermaid de Flowchartio utilise exactement ce principe, avec un sous-graphe par couloir.

Dans un sous-graphe, on peut fixer sa propre direction avec une ligne direction LR. Attention : quand des nœuds du sous-graphe sont reliés à des nœuds extérieurs, le moteur peut ignorer cette direction.

Styliser avec des classes

Définissez une classe une fois, puis appliquez-la à plusieurs nœuds :

flowchart LR
  A[Étape manuelle] --> B[Étape automatique]
  classDef auto stroke-dasharray: 4 3
  class B auto

Le raccourci B:::auto applique une classe au moment de la déclaration du nœud. Servez-vous des classes pour signaler les étapes automatiques, les étapes en cours de revue ou le chemin critique.

Styliser un nœud ou un lien

• style A stroke-width:3px modifie un seul nœud.
• linkStyle 0 stroke-width:3px modifie le premier lien (les liens sont numérotés dans l’ordre de déclaration).

Préférez les classes aux styles individuels : elles sont plus faciles à maintenir et gardent le schéma cohérent.

L’export Flowchartio

Dans le fichier .mmd, chaque couloir devient un sous-graphe portant le nom du responsable, et chaque étape est déclarée dans le sous-graphe de son responsable. Les flèches sont déclarées après les sous-graphes, avec les étiquettes des décisions. Vous pouvez coller le fichier tel quel, puis ajouter vos classes, par exemple pour mettre en avant les étapes automatiques, sans toucher à la structure.

Rester lisible

• Le style doit porter un sens, pas décorer.
• Ne comptez pas uniquement sur la couleur : associez-la à une étiquette ou à un type de trait, pour rester lisible à l’impression et pour les personnes daltoniennes.
• Les plateformes appliquent leur propre thème (clair ou sombre) : testez le rendu là où il sera affiché.

Retour aux bases avec l’aide-mémoire de la syntaxe, ou voyez quel format d’export convient à votre destination.