Diagramme d’états
Capturez chaque état et transition d’un système
Qu’est-ce qu’un Diagramme d’états ?
Un diagramme d’états montre les états possibles d’un objet et les événements qui les font évoluer : cycles de vie de commandes, workflows documentaires, états d’interface, gestion de connexions. Essentiel dès que « dans quel état sommes-nous ? » compte.
Le diagramme d’états a sa place dans les spécifications, là où « une commande remboursée peut-elle repasser en expédiée ? » doit avoir une réponse. C’est le seul diagramme qui rend visibles les transitions interdites : ce qui n’est pas dessiné n’est pas permis, ce qui transforme l’image en plan de test. Sa limite est combinatoire — deux machines indépendantes dans un même diagramme produisent un produit cartésien illisible. Séparez-les, ou imbriquez-les dans des états composites.
Exemple en direct
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]Quand l’utiliser
Erreurs fréquentes
Les noms d’états à plusieurs mots se coupent
Waiting for payment --> Paid crée trois états nommés Waiting, for et payment. Nommez l’état une fois avec state "Waiting for payment" as waiting, puis utilisez l’identifiant court waiting dans chaque transition.
Un [*] imbriqué n’est pas le départ
Un [*] écrit dans un état composite marque l’entrée de ce composite, pas celle du diagramme. Si tous vos [*] sont imbriqués, le diagramme lui-même n’a plus de point d’entrée et le lecteur ne sait pas par où commencer.
Les libellés de transition sont des événements
Le texte après les deux-points est libre : score > 80 s’affiche mais n’est jamais évalué, et deux transitions peuvent porter des conditions contradictoires sans la moindre protestation. Relisez ces libellés comme de la prose, pas comme du code.
Syntaxe de base
stateDiagram-v2
[*] --> Idle
Idle --> Active : start
Active --> [*] : stopstateDiagram-v2 direction LRUtilisez le moteur -v2, celui pour lequel la syntaxe actuelle est écrite. Ajouter direction LR convient aux cycles de vie longs et linéaires qui, sinon, débordent en bas de page.
[*] --> Draft Draft --> Review : submit[*] est le marqueur de départ à gauche d’une flèche et l’état final à sa droite. Le texte après les deux-points nomme l’événement qui déclenche la transition.
state Payment { [*] --> Pending Pending --> Captured }Un état composite cache une sous-machine derrière une seule boîte. Une transition peut viser le composite lui-même : on y entre alors par son propre marqueur de départ.
state gate <<choice>> gate --> Approved : score > 80Un pseudo-état de choix branche sur une condition sans inventer un faux état pour cela. Les marqueurs <<fork>> et <<join>> font la même chose pour les chemins parallèles.
Questions sur ce diagramme
Quelle différence avec un flowchart ?
Un flowchart suit un processus du début à la fin. Un diagramme d’états décrit tous les états possibles d’une chose et les événements déclenchant les transitions — y compris cycles et états d’erreur.
Mermaid prend-il en charge les états imbriqués ?
Oui — stateDiagram-v2 gère les états composites (imbriqués), forks, joins, choix et notes pour des machines à états réalistes.
Un diagramme d’états Mermaid peut-il exprimer gardes, actions d’entrée et de sortie ?
Pas formellement. Une transition porte un seul libellé en texte libre : une garde comme score > 80 s’y écrit en prose et rien ne la fait respecter. Il n’existe pas non plus de syntaxe d’action d’entrée ou de sortie — mettez-les dans une note à côté de l’état.
Comment représenter un état qui boucle sur lui-même ?
Mettez le même état des deux côtés de la flèche : Draft --> Draft : edit. Mermaid dessine une boucle sur la boîte et conserve le libellé ; plusieurs transitions entre les deux mêmes états gardent chacune le sien au lieu de fusionner.
Puis-je colorer un état en particulier ?
Oui. classDef bad fill:#fdd définit un style et class Failed bad l’applique, ce qui fait ressortir les états d’erreur ou terminaux. Le style vit dans la source : il survit à l’export en PNG et en SVG.
Comment exporter un diagramme d’états pour une présentation ?
Exportez en PNG 2× ou 4× pour des diapositives projetées, ou en SVG si l’outil l’accepte, puisque le SVG reste net et garde son texte sélectionnable. La source Mermaid reste la version que vous éditez et réexportez.
Diagramme d’états ou un autre type de diagramme ?
Diagramme d’états ou diagramme de séquence ?
Le diagramme de séquence montre un chemin à travers plusieurs participants ; le diagramme d’états montre tous les chemins d’un seul participant. Si la question intéressante est « qu’a répondu l’API », prenez la séquence. Si c’est « peut-on revenir ici », prenez les états.
Diagramme d’états ou diagramme de classes ?
Le diagramme de classes donne à une commande ses champs et ses relations ; le diagramme d’états lui donne une vie. Écrivez le premier quand on vous demande quelles données existent, le second quand on vous demande quelles transitions le code doit refuser.
Créez votre Diagramme d’états maintenant
Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.
Ouvrir Mermaid Studio