Tutoriel étape par étape complet : Comment créer un diagramme d’état (pour les absolus débutants)

Un Diagramme d’état UML est un outil visuel puissant qui modélise le comportement dynamique d’un système en illustrant comment il passe d’un état à un autre en réponse à des événements. Il capture le cycle de vie d’un objet ou d’un processus — en montrant ce qu’il peut être dans, ce qui déclenche un changement, et quelles actions se produisent lors des changements d’état — ce qui en fait un outil idéal pour comprendre des systèmes complexes comme les feux de circulation, les distributeurs automatiques, les workflows de connexion ou les personnages de jeu. En se concentrant sur les états (comme « Rouge », « En attente de paiement » ou « En saut »), les transitions (déclenchées par des événements tels que « le minuteur expiré » ou « bouton pressé ») et les conditions (garde), les diagrammes d’état apportent de la clarté, évitent les lacunes logiques et constituent une base solide pour la conception et le code. Que vous soyez un débutant apprenant la modélisation de systèmes ou un développeur construisant des logiciels robustes, maîtriser les diagrammes d’état vous donne la capacité de penser, concevoir et communiquer le comportement des systèmes avec précision et clarté.

State Machines for Everyone — Part 1 Introduction | by Alex Dodge | Well Red | Medium

💡 Objectif: Apprenez à modéliser des systèmes du monde réel à l’aide de machines à états — du concept à un diagramme propre et professionnel.

🔑 Les concepts clés que vous devez comprendre en premier

Concept Ce que cela signifie Pourquoi cela importe
État Une condition ou situation dans laquelle se trouve le système (par exemple Rouge, En attente de pièce) Montre ce qui se passe à tout moment
Événement Quelque chose qui déclenche un changement (par exemple Insérer une pièce, le minuteur expiré) Provient le passage d’un état à un autre
Transition Une flèche d’un état à un autre Lien les états via des événements
État initial Le point de départ (●) Il y en a toujours un
État final Fin du processus (○) Facultatif — pas toujours nécessaire
Garde [condition] Condition qui doit être vraie pour que la transition ait lieu Ajoute de la logique (par exemple, si assez d’argent ?)
Action / entrée / exécution Ce qui se produit lors de l’entrée, pendant ou de la sortie d’un état Ajoute un comportement aux états

📌 Pensez :
« Ce système peut être dans X états. »
Quand Y se produit, il passe à Z.”
C’est une machine à états !

🛠 Étape 0 – Mentalité : Posez ces questions

Avant de dessiner quoi que ce soit :

  • Quelles sont les situations clairement différentes dans lesquelles cet objet peut se trouver ?

  • Quels événements (les actions de l’utilisateur, le temps, les erreurs) provoquent des changements ?

  • Peut-il être dans deux états en même temps ? (Non → les machines à états basiques sont mutuellement exclusives.)

👉 Exemple : Un interrupteur d’éclairage est soit Allumé ou Éteint. Jamais les deux à la fois.

🧩 Étape 1 – Choisissez une chose concrète à modéliser

✅ Bonnes options pour les débutants :

  • Barrière à accès (verrouillée/déverrouillée)

  • Feu de signalisation (rouge/vert/jaune)

  • Distributeur automatique

  • Système de connexion

  • Statut de la commande : Créé → Payé → Expédié → Livré

❌ À éviter :

  • « Toute la boutique en ligne » → trop grand

  • « L’expérience utilisateur » → trop vague

✏️ Commencez par quelque chose de simple. Maîtrisez d’abord l’exemple simple.

📌 Étape 2 – Liste des états (utilisez des noms ou des participes présents)

Écrivez 4 à 8 états réalistes.

Utilisez des adjectifs ou des participes présents pour qu’il ressemble à un état :

  • Rouge

  • Vert

  • Jaune

  • En attente d'une pièce

  • Distribution de l'article

  • Préparation

  • Paiement échoué

✅ Astuce : Si vous avez plus de 10 états → divisez le système en systèmes plus petits.

🖌 Étape 3 – Dessinez les états sous forme de rectangles arrondis

Utilisezrectangles arrondis:

[ Rouge ]
[ Vert ]
[ En attente d'une pièce ]

✅ Outils :

  • draw.io / diagrams.net (meilleur choix gratuit)

  • Excalidraw (effet dessiné à la main)

  • PlantUML (basé sur le texte → facile à gérer avec le contrôle de version)

  • Lucidchart / Miro

🔷 Étape 4 – Ajouter l’état initial (point noir)

Dessinez uncercle noir rempliavec une flèche pointant vers le premier état.

[*] --> Rouge

Le[*]signifie « état initial » — c’est le point de départ.

➡️ Étape 5 – Dessinez les transitions avec des événements

Pour chaque état, demandez :

« Qu’est-ce qui peut se produire ici qui me fait quitter cet état ? »

Étiquetez les flèches avec :

événement [garde] / action

🔹 Commencez simplement : juste événement ou événement / action

Événements courants:

  • Insérer une pièce

  • le minuteur expiré

  • paiement échoué

  • bouton pressé

  • pedButton

  • expiration du délai

✅ Étape 6 – Ajouter un état final (facultatif)

Utilisez un cercle avec une bordure épaisse pour l’état final.

[Livré] --> [●]

Tous les systèmes n’ont pas d’états finaux (comme les feux de circulation qui fonctionnent indéfiniment).

🔁 Étape 7 – Ajouter des cas limites réalistes

Demandez :

  • Pouvez-vous annuler ? → ajouter Annuler → retour à Inactif

  • Le temps s’écoule ? → expiration du délai → retourner à En attente

  • Peut-il échouer ? → ajouter erreur → Retour au début

  • Peut-il rester dans le même état ? →transition auto

Exemple detransition auto (ajout d’argent) :

[A crédit] -- pièce insérée --> [A crédit]

🚦 Étape 8 – Utilisez les gardes pour une logique intelligente

Lorsquele même événement mène à des résultats différents, utilisezles gardes.

Exemple :

Si vous appuyez surpedButton pendant Vert, mais la demande n’est pas encore présente → vous entrez dansVert avec piéton en attente.

Mais si la demande est déjà définie → vous l’ignorez simplement.

[Vert véhicule] --> [Vert véhicule] : pedButton / définir demande = vrai

Ceci est unetransition auto avec action — pas un nouvel état.

🎯 Étape 9 – Ajouter les actions d’entrée/execution/sortie (facultatif mais puissant)

Vous pouvez écrire des actionsà l’intérieur de la boîte d’état:

[Rouge]
entrée / allumer le rouge
sortie / éteindre le rouge

do / attendre 30 secondes

Aide à clarifier le comportement sans surcharger les transitions.

✅ Étape 10 – Liste de vérification finale (posez-vous les questions)

✅ Vérifier Pourquoi cela importe
Un état initial ? Doit commencer quelque part
Tous les états ont des flèches sortantes (sauf le dernier) ? Pas de cul-de-sac
Pas d’états inaccessibles ? Chaque état doit être accessible
Les transitions sont-elles étiquetées avec des événements ? Cause et effet clairs
Les flèches ne disent pas « aller vers X » — la flèche indique la direction Plus propre
Les chemins d’annulation / expiration / erreur sont-ils inclus ? Les systèmes réels échouent — préparez-vous à cela
Le diagramme tient à l’écran ? Propre et lisible

📋 Référence rapide : Syntaxe PlantUML (standard UML)

Symbole Signification
[*] État initial
[*] --> État Commencer à partir de cet état
État --> État Transition
événement [garde] / action Étiquette sur la flèche
état "Nom" État nommé (facultatif)
état "X" comme X Alias pour les noms complexes
note à droite de l'État Boîte de commentaire

🎯 Exemple 1 : Feu de circulation simple (cycle à 3 états)

Parfait pour les absolus débutants.

🧠 Utilisation réelle :

  • Cycle de base du feu de circulation :Rouge → Vert → Jaune → Rouge

✅ États :

  • Rouge

  • Vert

  • Jaune

🔄 Événements :

  • le minuteur expiré (après 30s, 25s, 5s)

🛠 Code PlantUML (prêt à copier-coller) :

@startuml
skinparam monochrome true
[*] --> Rouge
Rouge --> Vert : après(30s)nle minuteur expiré
Vert --> Jaune : après(25s)nle minuteur expiré
Jaune --> Rouge   : après(5s)nle minuteur expiré

Rouge   : entry / allumer le rouge
Vert : entry / allumer le vert
Jaune: entry / allumer le jaune

note à droite de Rouge
  Les véhicules doivent s'arrêter
fin note

note à droite de Vert
  Les véhicules peuvent avancer
fin note

note à droite de Jaune
  Préparez-vous à vous arrêter
fin note
@enduml

✅ Comment l’utiliser:
Allez sur https://www.plantuml.com/plantuml, collez le code, puis appuyez sur « Générer ».

🖼️ Sortie : un diagramme d’état machine propre et aux allures animées.

🎯 Exemple 2 : un feu de circulation réaliste avec demande de passage piéton

Le la version la plus pédagogique — présente les gardes, les transitions auto et la logique complexe.

🧠 Utilisation réelle :

  • Les piétons appuient sur un bouton pour traverser.

  • La lumière attend plus longtemps si quelqu’un est en attente.

  • Après la fin du vert, il passe au jaune → rouge → marche → feu clignotant ne pas traverser → retour au vert.

📌 États clés :

  1. VéhiculeVert_AucuneDemande – vert, aucun piéton en attente

  2. VéhiculeVert_PiétonEnAttente – vert, quelqu’un a appuyé sur le bouton

  3. VéhiculeJaune – feu jaune (pas de marche)

  4. ToutRouge – délai de sécurité (très court)

  5. PiétonMarche – signal marche allumé

  6. PiétonClairance – feu clignotant ne pas traverser (temps de dégagement)

🧩 Transitions clés :

  • boutonPiéton → si pas en attente → définir la demande

  •  → le minuteur expiré → passer au jaune (si le temps vert est atteint)

  • boutonPiéton pendant jaune/rouge → se souvenir de la demande

  • timerWalk → passer au clignotement « ne pas traverser »

  • timerClearance → réinitialiser et retourner au vert

🚨 Remarque : Cette version utilise des gardes et des transitions auto, montrant pourquoi les machines d’état sont puissantes.

✅ Code PlantUML (entièrement fonctionnel, prêt à être utilisé) :

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "Vert véhiculen(pas de demande piétonne)" as VG_No
state "Vert véhiculen(piéton en attente)"   as VG_Wait
state "Jaune véhicule"                  as VYellow
state "Rouge toutn(blocage de sécurité)"      as AllRed
state "Marche piéton"                    as PedWalk
state "Clairance piétonn(clignotement « ne pas traverser »)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : après(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : après(45s)nvert prolongé quand piéton en attente
VG_Wait --> VG_Wait : pedButton / ignorer (déjà en attente)
VYellow --> AllRed : après(4s)
AllRed --> PedWalk : après(1s)
PedWalk --> PedClear : après(10s)nfin du temps de marche
PedClear --> VG_No : après(5s)nclairence terminéen/ resetPedDemand

note bas de VG_No
  Fonctionnement normal
  Pas de demande piétonne
end note

note à droite de PedClear
  Les piétons terminent leur traversée
  Signal clignotant « ne pas traverser »
end note

note à droite de VG_Wait
  Piéton a appuyé sur le bouton
  Le vert est prolongé jusqu'à 10s
end note

note à droite de VYellow
  Préparation à l'arrêt
  Changement de lumière véhicule
end note

note à droite de PedWalk
  Signal marche allumé
  Les piétons peuvent traverser
end note
@enduml

💡 Pourquoi c’est mieux que la version simple ?

  • Montre complexité du monde réel

  • Démontre gardes (si pedDemand)

  • Utilise transitions auto (VG_Wait --> VG_Wait)

  • Modélise comportement réel: le vert peut être prolongé !

  • Séparation claire entre véhicule et piéton logique

🎓 Exercices pratiques recommandés (à faire dans l’ordre)

# Exemple Temps Compétences acquises
1 Interrupteur lumineux (Allumé ↔ Éteint) 5 min Transitions basiques
2 Barrière (Verrouillée ↔ Déverrouillée) 10 min Événements, gardes
3 Feu de circulation (cycle à 3 états) 10 min Chronomètres, actions d’entrée
4 Distributeur automatique (en attente → paiement → distribution) 15 min Événements multiples, logique monétaire
5 Connexion (vide → saisie → envoi → succès/échec) 15 min Gestion des erreurs, états finaux
6 Statut de la commande (6 états) 20 min Modélisation de systèmes du monde réel

✅ Commencez par #1–3 sur papier ou dans draw.io. Ensuite utilisez PlantUML pour le reste.

🧠 Conseils finaux pour réussir

  • Commencez petit — n’essayez pas d’inclure tout d’un coup.

  • Utilisez des noms réels — En attente d'un jeton, pas État1.

  • Libellez clairement les transitions — bouton appuyé, expiration du délai, paiement échoué.

  • Dessinez-le d’abord à la main — puis digitalisez-le.

  • Testez-le mentalement: « Ce système peut-il se bloquer ? » → si oui, ajoutez une transition.

📌 Résumé : Votre liste de vérification de machine à états

✅ Un [*] (état initial)
✅ Les rectangles arrondis pour les états
✅ Les flèches pour les transitions
✅ Les événements sur les flèches (après(30s), boutonPied)
✅ Les gardes là où nécessaire ([demandePied])
✅ Les auto-transition pour les actions répétées
✅ Les actions d’entrée/sortie pour le comportement
✅ Mise en page propre, police lisible

🎯 Mot final : Vous êtes maintenant prêt !

Vous venez d’apprendre :

  • Ce qu’est un schéma de machine à états est

  • Comment penser en termes d’états et d’événements

  • Comment dessiner et lire comme un professionnel

  • Comment modéliser des systèmes réels, comme les feux de circulation

  • Comment utiliser PlantUMLécrire des diagrammes propres et maintenables

🎉 Vous n’apprenez pas seulement UML — vous apprenez à modéliser des systèmes réels, un état à la fois.

📌 Étapes suivantes (Votre parcours d’apprentissage)

  1. Dessinez le feu de circulation à trois états à la main— pas d’outils, juste du papier.

  2. Essayez PlantUMLavec le code ci-dessus — voyez-le s’afficher.

  3. Modifier: Modifiez les temps d’attente. Ajoutez un état « surcharge d’urgence ».

  4. Essayez la machine à boissons→ même logique, mais avec de l’argent.

  5. Dessinez le vôtre: Un personnage de jeu (marcher → sauter → attaquer → mort).

💬 Besoin d’aide ? Essayez ceci : « Je tente de modéliser un [votre système]— pouvez-vous m’aider à créer une machine à états ?»

🙌 Dernière réflexion

🔄 Tout ce qui change — qu’il s’agisse d’une lumière, d’une connexion ou d’une commande — peut être modélisé avec une machine à états.
Vous n’avez pas besoin d’être programmeur pour le comprendre. Il vous suffit de vous demander « Quels états peut prendre cet objet, et qu’est-ce qui le fait changer ? »

✅ Vous savez maintenant comment créer un diagramme de machine à états professionnel et fonctionnel — du débutant au modélisateur confiant.

🎉 Bonne modélisation !
Faites-moi savoir si vous souhaitez une version PDF imprimable, un quiz ou un défi de codage pour tester vos compétences.

Leave a Reply