Diagrammes de séquence avec WebSequenceDiagrams.com

Lors de la conception d\’un projet, on peut être amené à réaliser un diagramme de séquence en UML représentant les différentes interactions entre plusieurs composantes d\’un système. Ce type de diagramme est très utile lorsqu\’il s\’agit, pour un cas d\’utilisation donné, de détailler les différentes étapes permettant sa réalisation.
Bref, dessiner un diagramme de séquence est certes facilité avec certains outils (comme Dia ou Umbrello) mais cela prend malgré tout un certain temps, ne serait-ce que pour bien ajuster les tailles de chaque élément, et le design n\’est très souvent pas au rendez-vous. C\’est là qu\’intervient le site WebSequenceDiagrams.com. La page est très simple puisqu\’elle n\’offre pas beaucoup plus qu\’une zone de texte dans laquelle l\’utilisateur pourra saisir le détail des acteurs et des interactions en suivant une convention d\’écriture. Le site se charge ensuite de générer un PNG (ou un PDF) bien propre du diagramme. Plusieurs designs sont possible dont un que je trouve particulièrement réussi et idéal pour un document un peu officiel type rapport de stage ou documentation technique : Blue Modern.

Pour illustrer ceci, j\’ai repris un diagramme de séquence d\’un vieux projet de Master 1 que j\’ai refait avec WebSequenceDiagrams.com. Ça m\’a pris environ 5 minutes pour un résultat très satisfaisant. Voici le \ »code\ » que j\’ai entré dans la zone prévue :

Utilisateur 1->Logiciel de contrôle 1:Ecrire(message)
Logiciel de contrôle 1->Module XBee 1:Envoyer(message)
Module XBee 1->Module XBee 2:Envoyer(message)
Module XBee 2->Module XBee 1:Acquittement()
Module XBee 1->Module XBee 1: EffaceMemoire()
note right of \"Module XBee 1\"
Communication
sans-fil
end note
participant \"Logiciel de contrôle 2\"
Utilisateur 2->Logiciel de contrôle 2:Lire()
Logiciel de contrôle 2->Module XBee 2:Interroger()
Module XBee 2->Logiciel de contrôle 2:Envoyer(message)
Logiciel de contrôle 2->Utilisateur 2:Afficher(message)
Module XBee 2->Module XBee 2: EffaceMemoire()

Quelques explications sont peut-être nécessaires pour comprendre le principe.

• Une interaction simple s\’écrit : Premier acteur->Second acteur:Action
• Les acteurs apparaissent sur le diagramme dans l\’ordre d\’apparition dans le texte. Ainsi, pour imposer un ordre, on peut définir les participants grâce à l\’instruction……… participant \ »acteur 2\ » !
• Une boucle sur un acteur s\’écrit simplement : Premier acteur->Premier acteur:Action de la boucle
• Enfin, il est possible d\’ajouter des notes et de les placer grâce à quelques directives simple.

Le résultat est le suivant :

Une page d\’aide est disponible ici. Enfin, à droite de la zone de saisie sont disponible des images d\’interactions qui génèrent au clic le code correspondant.

NB: Merci encore à Charly pour l\’info!