Création d’un diagramme de séquence de retrait de cash ATM robuste avec PlantUML

A 16:10 hero banner styled graphic featuring a clean, modern illustration. The background is subtle and uses glowing accents, circuit board traces, and digital symbols with blues, greens, and white colors. Vertical columns define main participants like "Card Reader", "ATM Interface", "Bank Server", and "Cash Dispenser" across the top. Arrows with numbered steps (1, 2, 3...) indicate the sequential flow of communication, beginning with a "Customer" actor on the left. Key sections highlight the main decision structures using "alt [PIN Invalid] / [PIN Valid]" and "alt [Insufficient Funds] / [Account Approved]", clearly detailing both successful and alternative paths of interaction. No product logos are included. At the very top center, the main title in clean fonts reads "BUILDING A ROBUST ATM SEQUENCE DIAGRAM" with a subtitle "STEP-BY-STEP PLANTUML GUIDE".

Concevoir des transactions financières systémiques exige une clarté absolue. Que vous soyez en train d’architecturer un moteur bancaire, de documenter un flux de travail hérité ou de former des équipes d’ingénieurs, un diagramme de séquence PlantUML est l’une des méthodes les plus efficaces pour visualiser les interactions ordonnées dans le temps entre les composants du système.

Dans ce tutoriel, je vous accompagnerai pas à pas dans mon raisonnement exact pour créer un diagramme de séquence de retrait de cash ATM depuis zéro en utilisant PlantUML. Nous aborderons la configuration des participants, les flux de messages et les branches conditionnelles imbriquées pour la gestion des erreurs — tout cela en utilisant VPasCode, notre outil gratuit outil de diagramme en code et éditeur en ligne éditeur PlantUML.

An ATM Sequence Diagram in PlantUML

 


Étape 1 : Configuration du titre et du numérotage automatique des étapes

J’commence toujours mes diagrammes PlantUML en définissant des configurations globales claires. Lors de la modélisation d’opérations financières comme un retrait de cash ATM, suivre l’ordre d’exécution est crucial à la fois pour les développeurs et les auditeurs.

Pour y parvenir, je commence par le @startuml tag, définir un titre descriptif et activer la fonctionnalité autonumber fonctionnalité.

@startuml
titre Diagramme de séquence de retrait de cash ATM

autonumber

Pourquoi utiliser autonumber? Sans numérotation automatique, les relecteurs doivent suivre manuellement les lignes de séquence pour comprendre l’ordre. En imposant un numérotage séquentiel, chaque demande et réponse est automatiquement indexée, rendant le croisement de références lors des revues d’architecture totalement sans effort.

Étape 2 : Définition des acteurs et des participants du système

Ensuite, j’identifie les entités distinctes participant à la transaction. Je souhaite séparer les acteurs humains des composants backend et des sous-systèmes matériels.

Plutôt que de laisser PlantUML déclarer les participants de manière implicite au fur et à mesure que les messages sont dessinés, je les définis explicitement en haut. Cela garantit qu’ils apparaissent dans un ordre logique, de gauche à droite, reflétant leur frontière architecturale :

acteur Client
participant "Interface ATM" comme ATM
participant "Lecteur de carte" comme Lecteur
participant "Serveur bancaire" comme Banque
participant "Distributeur de cash" comme Distributeur

Raisonnement de conception :

  • acteur Client: Représente l’utilisateur humain qui initie l’action.
  • participant ... comme Alias: Attribution d’alias courts comme DAB, Lecteur, et Banque rend le reste du script propre et lisible sans avoir à répéter des chaînes d’affichage longues.
  • En plaçant Lecteur entre Client et Interface DAB, je reflète précisément la séquence physique de l’insertion de la carte avant les interactions avec l’interface logicielle.

Étape 3 : Modélisation du flux d’authentification initial

Une fois les participants déclarés, je commence à cartographier l’initialisation du parcours idéal : insertion de la carte, lecture des données, demande du code PIN, et contact avec le serveur central de la banque.

Client -> Lecteur : Insérer la carte DAB
Lecteur -> DAB : Lire les détails de la carte
DAB -> Client : Demander le code PIN
Client -> DAB : Saisir le code PIN
DAB -> Banque : Vérifier la carte et le code PIN

Remarquez comment les messages synchrones utilisent des flèches pleines (->). Le matériel de la carte déclenche le logiciel DAB, qui invite l’utilisateur, capture l’entrée et transmet en toute sécurité les identifiants d’authentification au Banque serveur.

Étape 4 : Structuration de la branche d’authentification avec alt blocs

Les systèmes du monde réel échouent, et les diagrammes de séquence doivent communiquer les conditions d’erreur de manière explicite. Une fois que le DAB demande une vérification à la banque, deux résultats sont possibles : l’authentification échoue ou réussit.

Pour représenter la logique conditionnelle dans PlantUML, j’utilise un alt / sinon / fin bloc :

alt PIN invalide
    Banque --> ATM : Authentification échouée
    ATM -> Client : Afficher le message "PIN invalide"
    ATM -> Lecteur : Éjecter la carte
    Lecteur --> Client : Rendre la carte
sinon PIN valide
    Banque --> ATM : Authentification réussie
    ATM -> Client : Demander le choix de la transaction et le montant
    Client -> ATM : Sélectionner "Retrait" et saisir le montant
    ATM -> Banque : Demander l'autorisation de retrait (montant)
    ...
fin

Techniques clés utilisées :

  • Flèches de retour pointillées (-->) signalent les messages de réponse asynchrones renvoyés aux composants appelants.
  • Étiquettes de bloc claires telles que [PIN invalide] et [PIN valide] informent instantanément les développeurs logiciels sur la manière dont les flux d’exception se terminent (par exemple, affichage d’une erreur, éjection de la carte et retour du matériel).

Étape 5 : Imbriquer la logique pour l’autorisation du compte et le déclenchement du distributeur de billets

Une fois l’authentification vérifiée, l’utilisateur demande un retrait. Toutefois, la banque doit vérifier les soldes du compte et les limites journalières. Pour représenter cette validation secondaire, j’imbrique un deuxième bloc alt à l’intérieur de la branche PIN valide .

Si les fonds sont insuffisants, la transaction se termine en toute sécurité. Si approuvée, la banque débite le compte, active le distributeur de billets, remet les billets, éjecte la carte et propose un reçu imprimé facultatif.

    alt Fonds insuffisants / Limite journalière dépassée
        Banque --> ATM : Transaction refusée
        ATM -> Client : Afficher le message d'erreur
        ATM -> Lecteur : Éjecter la carte
        Lecteur --> Client : Rendre la carte
    sinon Compte approuvé
        Banque -> Banque : Débiter le solde du compte
        Banque --> ATM : Transaction approuvée

        ATM -> Distributeur : Distribuer les billets
        Distributeur --> ATM : Billets prêts
        ATM -> Client : Remettre les billets
        Client -> ATM : Prendre les billets

        ATM -> Lecteur : Éjecter la carte
        Lecteur --> Client : Rendre la carte
        ATM -> Client : Imprimer le reçu (facultatif)
    fin

Astuce pro : Remarquez l’appel interne Banque -> Banque : Débiter le solde du compte. Les flèches auto-référentielles dans PlantUML sont idéales pour mettre en évidence les mises à jour d’état internes du backend qui n’impliquent pas de communication réseau externe.


Le script PlantUML complet

Voici le code source complet et assemblé pour notre diagramme de séquence de retrait de cash ATM. Vous pouvez copier-coller ce code directement dans votre éditeur PlantUML préféré éditeur PlantUML gratuit pour le modifier ou générer des graphiques vectoriels :

@startuml
titre Diagramme de séquence de retrait de cash ATM

autonumber
acteur Client
participant "Interface ATM" comme ATM
participant "Lecteur de carte" comme Lecteur
participant "Serveur bancaire" comme Banque
participant "Distributeur de cash" comme Distributeur

Client -> Lecteur: Insérer la carte ATM
Lecteur -> ATM: Lire les détails de la carte
ATM -> Client: Demander le code PIN
Client -> ATM: Saisir le code PIN
ATM -> Banque: Vérifier la carte et le code PIN

alt Code PIN invalide
    Banque --> ATM: Échec de l'authentification
    ATM -> Client: Afficher le message "Code PIN invalide"
    ATM -> Lecteur: Éjecter la carte
    Lecteur --> Client: Rendre la carte
autre Code PIN valide
    Banque --> ATM: Authentification réussie
    ATM -> Client: Demander le choix de la transaction et le montant
    Client -> ATM: Sélectionner "Retrait" et saisir le montant

    ATM -> Banque: Demander l'autorisation de retrait (montant)

    alt Fonds insuffisants / Limite quotidienne dépassée
        Banque --> ATM: Transaction refusée
        ATM -> Client: Afficher un message d'erreur
        ATM -> Lecteur: Éjecter la carte
        Lecteur --> Client: Rendre la carte
    autre Compte approuvé
        Banque -> Banque: Débiter le solde du compte
        Banque --> ATM: Transaction approuvée

        ATM -> Distributeur: Distribuer le cash
        Distributeur --> ATM: Cash prêt
        ATM -> Client: Présenter le cash
        Client -> ATM: Prendre le cash

        ATM -> Lecteur: Éjecter la carte
        Lecteur --> Client: Rendre la carte
        ATM -> Client: Imprimer le reçu (facultatif)
    fin
fin

@enduml

The ATM Sequence Diagram editing in VPasCode PlantUML editor

Pourquoi rendre vos diagrammes de séquence avec VPasCode ?

Créer des diagrammes complexes à l’aide de code ne devrait pas nécessiter des configurations locales fastidieuses ou une compilation manuelle en ligne de commande.VPasCode de Visual Paradigm apporte un rendu instantané et une puissante assistance par IA directement dans votre navigateur :

  • Détection automatique du format : Collez des scripts PlantUML, Mermaid, Graphviz ou D2 — VPasCode reconnaît instantanément le format DSL et le rend en temps réel.
  • Correction automatique des erreurs de code par IA :Bloqué par une erreur de syntaxe ? Cliquez sur « Corriger par IA » pour visualiser des comparaisons transparentes en parallèle et corriger automatiquement les erreurs de syntaxe.
  • Traduction multilingue par IA : Traduisez facilement les étiquettes et messages des diagrammes pour les équipes techniques internationales en quelques secondes.
  • Exportation en haute résolution : Téléchargez des graphiques vectoriels SVG propres et évolutifs ou des images PNG en haute résolution pour la documentation technique et les diapositives.

Commencez à modéliser des diagrammes en tant que code gratuitement

Prêt à transformer vos notes textuelles en diagrammes de séquence prêts à l’emploi ? Essayez notre éditeur en ligne éditeur PlantUML sur VPasCode — 100 % gratuit avec rendu instantané en direct.

Lancer l’éditeur gratuit VPasCode →

Retour en haut