Aller au contenu
fr
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

Générateur de diagramme d’états

Listez les transitions entre états et obtenez un diagramme de machine à états avec les événements sur les flèches.

Traité localement dans votre navigateur

Options
Plan : une transition par ligne, « Depuis -> Vers: événement ». [*] est le début/la fin. Ou collez du code « stateDiagram-v2 ».0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que Générateur de diagramme d’états ?

Un diagramme d’états (machine à états finis) décrit les états possibles d’un objet ou d’un processus et les événements qui le font passer de l’un à l’autre. On l’utilise pour le cycle de vie d’une commande, les parcours d’interface, la gestion de protocoles et la logique de jeu.

En mode rapide, vous écrivez une transition par ligne, « Depuis -> Vers: événement », et utilisez [*] pour le début et la fin. L’outil convertit le tout en code Mermaid stateDiagram-v2, avec des alias pour les noms contenant des espaces, et affiche le code généré à côté du diagramme. Vous pouvez aussi coller votre propre code stateDiagram avec états composites, forks et notes, et régler la direction de la mise en page.

Comment ça marche ?

  1. Écrivez des transitions comme « Repos -> Traitement: envoyer », une par ligne ; utilisez [*] pour l’état initial et final.
  2. Ou collez du code stateDiagram-v2 pour des états composites, choix et notes.
  3. Choisissez la direction de la mise en page et un thème.
  4. Exportez en SVG ou PNG, ou copiez le code Mermaid généré.

Cas d'usage courants

  • Modéliser le cycle de vie d’une commande : créée, payée, expédiée, livrée, annulée.
  • Documenter un parcours d’interface ou un assistant avec l’événement qui déclenche chaque changement d’écran.
  • Décrire un protocole réseau ou la machine à états d’une connexion.
  • Concevoir la logique d’un jeu ou d’un moteur de workflow avant de la coder.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

stateDiagram-v2
    direction LR
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : ok
    Processing --> Failed : error
    Failed --> Idle : retry
    Success --> [*]

Confidentialité

Générateur de diagramme d’états s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

Le plan rapide ne couvre que les transitions simples. États composites, forks, jonctions, choix et notes demandent du code stateDiagram-v2. Mermaid dessine le diagramme mais ne vérifie pas que la machine est complète ou déterministe.

Questions fréquentes

Comment marquer les états de début et de fin ?

Utilisez [*] comme source de l’état initial (« [*] -> Repos ») et comme cible de l’état final (« Terminé -> [*] »).

Les noms d’états peuvent-ils contenir des espaces ?

Oui. Un nom comme « En attente de paiement » est déclaré comme un état avec libellé et un identifiant généré, ce qui garde des transitions Mermaid valides.

Quelle différence entre stateDiagram et stateDiagram-v2 ?

stateDiagram-v2 est le moteur de rendu récent, avec une meilleure mise en page et plus de fonctions. Le mode plan génère toujours du code v2.

Outils associés

Plus d'outils dans Markdown & diagrammes →