Générateur de diagrammes d'états
Modélisez une machine à états en texte et regardez-la s'afficher. Définissez les états, les transitions et les événements avec le stateDiagram-v2 de Mermaid — cycles de vie des commandes, états de connexion, flux d'approbation — le tout sur votre appareil.
One step per line. Indent two spaces to branch beneath the line above.
États, transitions et les événements entre eux
Un diagramme d'états répond « qu'est-ce que cette chose peut être, et comment se déplace-t-elle entre ces états ? » Le stateDiagram-v2 de Mermaid correspond directement à cela : « [*] » marque le début et la fin, chaque « A --> B: event » est une transition étiquetée, et un « state Name { … } » composite imbrique les sous-états pour un comportement plus riche. C'est la façon la plus claire de cerner un cycle de vie de commande, un protocole de connexion, ou le chemin d'approbation d'un document.
L'écrire en texte signifie que le modèle reste honnête. Ajoutez un état, nommez l'événement qui le atteint, rafraîchissez — la mise en page recoule automatiquement et le diagramme ne dérive jamais des règles qu'il documente.
D'une enum de statut à une image
Si votre code a déjà un champ de statut — en attente, payé, expédié, annulé — un diagramme d'états transforme cet enum en quelque chose qu'une équipe entière peut raisonner, y compris les transitions que votre code autorise et celles qu'il interdit. Étiquez chaque flèche avec l'événement ou la méthode qui la déclenche afin que le diagramme se lise comme la spec.
Déposez le bloc Mermaid dans une doc de conception ou une demande de tirage et les examinateurs peuvent repérer une transition manquante ou un chemin impossible avant qu'il ne devienne un bug.
Questions fréquemment posées
Comment créer un diagramme d'états à partir de texte ?
Commencez par « stateDiagram-v2 », marquez le départ avec « [*] --> First », puis ajoutez les transitions comme « Pending --> Paid: payment confirmed ». Les états finaux utilisent « Last --> [*] ». Il s'affiche en direct et exporte en SVG ou PNG.
Comment étiqueter une transition avec son événement ?
Mettez le déclencheur après un deux-points sur la flèche, par exemple « Draft --> Submitted: submit ». L'étiquette montre l'événement, la méthode ou la condition qui provoque le changement d'état.
Puis-je imbriquer les états (états composites) ?
Oui — enveloppez les sous-états dans « state Name { … } » avec leurs propres « [*] --> … » départ. L'antisèche ci-dessus montre la syntaxe ; l'exemple du lecteur multimédia démontre un état composite Playing.
Quelle est la différence entre un diagramme d'états et un logigramme ?
Un logigramme montre un processus — des étapes et des décisions exécutées une fois. Un diagramme d'états montre les états qu'un objet peut occuper au cours de sa vie et les événements qui le déplacent entre eux, donc les boucles vers les états antérieurs sont normales.
Mon diagramme d'états est-il envoyé quelque part ?
Non. Il s'affiche dans votre navigateur avec Mermaid, donc vos états, événements et logique interne ne quittent jamais votre appareil.