🔄 Mermaid

Diagramme d’états

Capturez chaque état et transition d’un système

Ouvrir cet exemple dans l’éditeur En générer un avec l’IA

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.

Exemple en direct

Code Mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Exemple en direct

Quand l’utiliser

Modéliser les cycles de vie de commandes, tickets ou documents

Concevoir les états de composants UI et de connexions

Spécifier les règles métier autour des transitions de statut

Syntaxe de base

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

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.

Explorer les autres types de diagrammes

🔀 Flowchart (logigramme)💬 Diagramme de séquence 🧩 Diagramme de classes 🗄️ Diagramme entité-association 📅 Diagramme de Gantt 🥧 Diagramme circulaire 🧠 Carte mentale 🌿 Graphe Git 🕰️ Frise chronologique 🚶 Parcours utilisateur 🎯 Matrice à quadrants

Créez votre Diagramme d’états maintenant

Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.

Ouvrir Mermaid Studio