Le diagramme d’activité UML est l’outil parfait pour visualiser le workflow d’une application. En développement web, il permet de modéliser la logique métier, du moment où l’utilisateur clique sur un bouton jusqu’à l’affichage du résultat.
Guide du Diagramme d’Activité UML
Le diagramme d’activité se lit un peu comme un algorithme graphique. Il décrit l’enchaînement des actions et les conditions de décision au sein d’un système.
Les Composants de Base
Pour construire un diagramme d’activité, on utilise un set de symboles standardisés :
| Symbole | Nom | Description |
|---|---|---|
| ● | Nœud initial | Le point de départ du processus. |
| rectangle arrondi | Action | Une étape du processus (ex: “Valider le formulaire”). |
| ◇ | Décision | Un choix logique (Si… alors…). |
| ▬ | Fork / Join | Pour diviser ou regrouper des flux parallèles. |
| ◉ | Nœud final | La fin du processus. |
Exemple Pratique : Processus de Connexion
Voici comment modéliser une authentification classique :
-
Départ : L’utilisateur saisit ses identifiants.
-
Action (Front) : Vérification du format de l’email.
-
Décision : Format valide ?
-
Non ➔ Retour au formulaire avec erreur.
-
Oui ➔ Envoi de la requête au serveur.
-
-
Action (Back) : Vérification en base de données.
-
Décision : Credentials corrects ?
-
Non ➔ Retour erreur 401.
-
Oui ➔ Génération du Token JWT et redirection.
-
-
Fin : Accès au tableau de bord.
Pourquoi l’utiliser en Web ?
-
Clarifier les cas complexes : Idéal pour les tunnels de commande ou les systèmes de paiement.
-
Faciliter la communication : Permet d’expliquer la logique aux Product Owners sans montrer une seule ligne de code.
-
Détecter les bugs logiques : Visualiser le flux permet souvent de voir des “chemins morts” ou des oublis de gestion d’erreur.
Outils recommandés
-
Lucidchart / Miro : Très visuels et collaboratifs.
-
Mermaid.js : Pour générer des diagrammes directement en code dans votre documentation Markdown.
-
PlantUML : Le standard “Code-to-UML” pour les puristes.
@startuml
start
repeat
:Tentative de connexion;
repeat while (Connexion réussie) is (non) not (oui)
if (livre disponible ?) then (oui)
else (non)
stop
end if
:Réserver un livre;
if(pénalité de retard ?) then (oui)
:processus bloqué;
stop
else(non)
if(Livraison à domicile ?) then (oui)
repeat
if (payement réussi ?) then (oui)
break
else (non)
endif
repeat while (essais restants > 0) is (oui) not (non)
if (essais restants = 0 ?) then (oui)
stop
else (non)
endif
:prélèvement de 5 euros;
else(non)
endif
:Commande du livre;
endif
stop
@enduml