Diagrammes d'etats
Representez les transitions d'etats dans les systemes ou les applications. Ideal pour modeliser les cycles de vie et les flux de travail.
Qu'est-ce qu'un Diagrammes d'etats ?
Les diagrammes d'etats, egalement appeles diagrammes de machines a etats, visualisent les differents etats dans lesquels un objet ou un systeme peut se trouver et comment il transite entre les etats en reponse a des evenements. Ils sont essentiels pour modeliser le comportement du cycle de vie, les flux de travail et la logique conditionnelle complexe. Chaque etat represente une condition stable, tandis que les transitions montrent les declencheurs qui provoquent les changements d'etat.
Modifier et previsualiser
Construisez un Diagrammes d'etats avec la syntaxe Mermaid et voyez les changements instantanement.
Example
State diagram example
A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.
Mermaid code
stateDiagram-v2
[*] --> Draft
Draft --> Preview: render
Preview --> Editing: update code
Preview --> Exported: download PNG
Editing --> Preview: render again
Exported --> [*]Cas d'utilisation courants
Gestion de l'etat des applications
Modelisez les etats de l'interface utilisateur, les flux de validation de formulaires et les modes d'application. Essentiel pour concevoir des machines a etats dans les frameworks frontend comme React ou Vue.
Modelisation de flux de travail
Concevez des flux d'approbation, des etats de traitement de commandes et la gestion du cycle de vie des tickets. Cartographiez les transitions de statut et les conditions de garde pour les processus metier.
Conception de protocoles
Visualisez les etats des protocoles reseau, les cycles de vie des connexions et les machines a etats de communication. Crucial pour les systemes embarques et la programmation de dispositifs IoT.
Developpement de jeux
Modelisez les etats des personnages, les modes de jeu et la progression des niveaux. Concevez des machines a etats finis pour le comportement de l'IA et les mecaniques de jeu.
Fonctionnalites cles
Types d'etats
Prise en charge des etats simples, des etats composites et des etats speciaux comme les pseudo-etats initial, final et de choix.
Gardes de transition
Definissez des transitions conditionnelles avec des conditions de garde et des actions qui s'executent lors des changements d'etat.
Etats imbriques
Creez des machines a etats hierarchiques avec des etats parents et enfants pour modeliser des comportements complexes.
Etats concurrents
Modelisez des machines a etats paralleles et des regions orthogonales pour les systemes au comportement concurrent.
Bonnes pratiques
Commencez simplement
Commencez par les etats de haut niveau et affinez progressivement. Utilisez des etats composites pour masquer la complexite jusqu'a ce qu'elle soit necessaire.
Nommez les etats comme des conditions
Utilisez des adjectifs ou des participes passes (par exemple, 'Actif', 'Suspendu', 'Termine') plutot que des verbes.
Documentez les transitions
Etiquetez toutes les transitions avec des evenements, des conditions de garde et des actions. Chaque fleche doit raconter une histoire claire.
Evitez l'explosion des etats
Si vous avez trop d'etats, cherchez des modeles pour les combiner ou utilisez des variables d'etat a la place.
Explorer d'autres types de diagrammes
Organigrammes
Visualisez les processus, les flux de travail et les algorithmes avec des noeuds et des fleches directionnelles. Parfait pour les processus metier et les arbres de decision.
Diagrammes de sequence
Documentez les interactions entre differents acteurs ou systemes au fil du temps. Ideal pour la documentation API et la conception de systemes.
Diagrammes de classes
Modelisez les systemes orientes objet avec des classes, des attributs et des relations. Essentiel pour la planification de l'architecture logicielle.
Diagrammes de Gantt
Planifiez et suivez les calendriers de projets avec des taches et des dependances. Parfait pour la gestion de projets et la planification.
Diagrammes ER
Concevez des schemas de bases de donnees avec des entites et des relations. Ideal pour la modelisation et la documentation de bases de donnees.
Parcours utilisateur
Cartographiez les experiences et interactions des utilisateurs a travers les points de contact. Excellent pour la conception UX et la cartographie du parcours client.
Graphes Git
Visualisez les strategies de branchement Git et l'historique des commits. Utile pour expliquer les flux de travail du controle de version.
Cartes mentales
Organisez vos idees, faites du brainstorming et creez des structures visuelles hierarchiques. Parfait pour la planification et la cartographie des connaissances.
Diagrammes circulaires
Affichez les distributions proportionnelles de donnees avec des graphiques circulaires. Ideal pour montrer les pourcentages et les repartitions de parts de marche.
Chronologies
Visualisez les evenements chronologiques et les jalons le long d'un axe temporel. Ideal pour les historiques de projets et les feuilles de route.
Tableaux Kanban
Organisez les taches en colonnes representant les etapes du flux de travail. Parfait pour la gestion de projet agile et le suivi des taches.
Diagrammes en quadrants
Positionnez des elements sur une grille a deux axes pour comparer et prioriser. Ideal pour la priorisation des fonctionnalites et l'analyse strategique.
Diagrammes de Sankey
Visualisez les quantites de flux entre les noeuds avec des fleches proportionnelles. Parfait pour les flux d'energie, l'allocation budgetaire et les entonnoirs de conversion.
Graphiques XY
Creez des diagrammes a barres et des graphiques lineaires avec des axes personnalisables. Ideal pour la visualisation de donnees et l'analyse des tendances.
Diagrammes de blocs
Construisez des mises en page structurees avec des blocs disposes en colonnes et en lignes. Ideal pour l'architecture systeme et les vues d'ensemble des composants.
Diagrammes d'architecture
Concevez des architectures cloud et systeme avec des icones de services et des connexions. Parfait pour la documentation d'infrastructure.
Diagrammes de paquets
Visualisez les structures de paquets de protocoles reseau avec des dispositions de champs au niveau du bit. Essentiel pour la documentation des protocoles reseau.