Quelle est la différence entre stateDiagram et stateDiagram-v2 ?

`stateDiagram-v2` est la syntaxe recommandée actuelle dans Mermaid v10+. Elle ajoute la prise en charge des états composites (imbriqués), des régions concurrentes, des pseudostats de choix, des fourches et des jonctions — des fonctionnalités manquantes dans le `stateDiagram` original. La syntaxe v1 fonctionne toujours pour la compatibilité descendante, mais tous les nouveaux diagrammes devraient utiliser `stateDiagram-v2` pour accéder à l'ensemble complet des fonctionnalités.

Comment montrer des états imbriqués (composites) dans Mermaid ?

Utilisez un bloc `state` avec des accolades : `state Traitement { [*] --> Validation \n Validation --> Facturation \n Facturation --> [*] }`. L'état externe 'Traitement' contient sa propre machine à états interne. Les états composites modélisent des flux de travail complexes où un état de haut niveau a des sous-processus internes, comme une commande qui passe par plusieurs sous-étapes tout en étant dans le statut 'Traitement'.

Comment ajouter des étiquettes aux transitions d'état ?

Ajoutez deux points après la flèche de transition : `Inactif --> Chargement : l'utilisateur soumet le formulaire`. L'étiquette documente l'événement ou la condition qui déclenche la transition. Des transitions bien étiquetées transforment un diagramme d'états en une spécification exécutable — les développeurs peuvent mapper chaque étiquette directement à un appel de fonction, un gestionnaire d'événements ou une réponse d'API dans leur implémentation.

Que sont les états concurrents et quand dois-je les utiliser ?

Les états concurrents (utilisant le séparateur `--` à l'intérieur d'un état composite) modélisent des parties d'un système qui s'exécutent en parallèle. Par exemple, un lecteur de musique pourrait avoir des états concurrents pour la lecture (en cours/en pause) et l'affichage (plein écran/normal). Utilisez des états concurrents lorsque deux comportements indépendants coexistent et que chacun a besoin de sa propre machine à états, plutôt que de modéliser chaque combinaison comme un état de niveau supérieur distinct.

Visualiseur de diagrammes d'états Mermaid

Générez des diagrammes d'états et des machines à états Mermaid dans votre navigateur. Prévisualisez les transitions et exportez en SVG ou PNG. Outil en ligne gratuit.

Code Mermaid

Aperçu

Entrez du code Mermaid pour prévisualiser votre diagramme

Les diagrammes d'états modélisent le comportement d'un système en montrant tous les états possibles et les transitions entre eux déclenchées par des événements. Ils sont essentiels pour la conception de machines à états finis, la modélisation du cycle de vie des composants d'interface utilisateur, la documentation des flux de travail de commandes et la spécification du comportement des systèmes embarqués. La syntaxe `stateDiagram-v2` de Mermaid est largement générée par les assistants d'IA lorsque les développeurs posent des questions telles que « Modélise les états d'une commande de paiement », « Montre-moi le cycle de vie d'un composant React » ou « Conçois la machine à états pour un feu de circulation ». Coller la sortie dans Zolkit révèle immédiatement si les transitions sont complètes, si des états sont inaccessibles et si le chemin nominal et les chemins d'erreur sont correctement connectés. Le visualiseur de diagrammes d'états de Zolkit prend en charge les fonctionnalités de `stateDiagram-v2`, y compris les états initiaux et terminaux (`[*]`), les étiquettes de transition, les états composites (diagrammes d'états imbriqués), les états concurrents utilisant `--`, les pseudostats de choix et les notes. Le visualiseur rend à la fois les automates finis simples et les machines à états hiérarchiques complexes trouvées dans les applications réelles.

Diagrammes Associés

← Visualiseur de Diagrammes Mermaid Visualiseur de diagrammes de flux Mermaid Visualiseur de diagrammes de séquence Mermaid Visualiseur de diagrammes de classes Mermaid

Visualiseur et Exportateur Gratuit de Diagrammes Mermaid en Ligne

Le Visualiseur de Diagrammes Mermaid de Zolkit vous permet de coller n'importe quel code Mermaid et de voir un diagramme rendu instantanément — aucune installation, aucune inscription, aucun téléversement sur serveur. Tout s'exécute dans votre navigateur, ce qui en fait le moyen le plus rapide de vérifier les diagrammes générés par IA depuis Claude, ChatGPT ou Gemini. Prend en charge tous les principaux types de diagrammes Mermaid : organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, diagrammes d'états, cartes mentales, graphes Git, diagrammes circulaires et chronologies.

Aperçu Instantané en Direct

Les diagrammes sont rendus automatiquement pendant que vous tapez, avec un délai de 300 ms pour qu'il ne soit jamais lent.

100% Privé

Tout le rendu se fait dans votre navigateur à l'aide de mermaid.js. Votre code n'est jamais envoyé à aucun serveur.

Exporter SVG & PNG

Téléchargez votre diagramme en tant que SVG vectoriel net ou PNG 2× haute résolution prêt pour vos documents et présentations.

Tous les Types de Diagrammes Mermaid

Prend en charge les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, cartes mentales, graphes Git, et plus encore.

Prêt pour les Diagrammes IA

Conçu pour l'ère de l'IA — prévisualisez directement les diagrammes générés par Claude, ChatGPT, Gemini, ou tout LLM.

Toujours Gratuit

Aucun compte requis, aucune limite d'utilisation, aucun filigrane. Le visualiseur Mermaid de Zolkit est entièrement gratuit pour toujours.

Comment Prévisualiser un Diagramme Mermaid

1
Collez votre code Mermaid dans l'éditeur à gauche — vous pouvez le copier depuis un assistant IA ou l'écrire manuellement.
2
Le diagramme est rendu instantanément dans le panneau d'aperçu à droite. S'il y a une erreur de syntaxe, un message explique le problème.
3
Cliquez sur 'Exporter SVG' ou 'Exporter PNG' pour télécharger votre diagramme sous forme de fichier prêt pour la documentation, les présentations ou le partage.