Éditeur de diagramme de séquence - Partie 1 - Objectifs

Cet article est le premier d'une série dans laquelle nous allons construire itérativement un éditeur de diagramme de séquence.
Comme tout projet bien mené qui se respecte, il faut dans un premier temps en définir les objectifs.

Le diagramme de séquence


Un diagramme de séquence est une représentation graphique des interactions entre différents acteurs selon un ordre chronologique. Il fait parti des différents diagrammes manipulés à travers la méthodologie UML.

Dans notre activité, nous utilisons régulièrement ce type de représentations car il permet de documenter simplement les échanges entre différentes parties d'un système et ainsi mieux communiquer au sein d'un  projet.

Jusque là, nous utilisions les services d'un site web spécialisé pour réaliser ce type de diagrammes : https://www.websequencediagrams.com/. Ce site permet de représenter graphiquement des diagrammes de séquence à partir d'une formulation textuelle.

C'est donc tout naturellement que nous nous sommes interrogés sur la façon d'implémenter un tel outil en ligne et que nous vous proposons un moyen simple et efficace d'y parvenir.

Par la suite, nous allons nous inspirer du formalisme de ce site comme support pour notre outil.

Voici un exemple de description de diagramme de séquence tel que l'attend le site websequencediagrams :
title Authentication Sequence
Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response

Et voici la représentation associée à cet exemple :


Un outil permettant de transformer (ou plutôt interpréter) le texte en entrée pour obtenir l'image précédente en sortie est ce que l'on appelle un DSL textuel.

Un DSL textuel pour interpréter la saisie


Qu'est-ce qu'un DSL textuel ?


Un DSL (pour Domain Specific Language) est un langage dont les spécifications s'adressent à un domaine d'application précis.

Nous ne souhaitons pas que les utilisateurs utilisent la programmation classique pour définir le diagramme de séquence qu'ils souhaitent. Nous allons donc créer un langage dédié à la description du diagramme.

Pour cela nous reprendrons à l'identique la grammaire de description du site websequencediagrams.

La définition que je vous donne d'un DSL est très très simplifiée. Si cette partie vous intéresse davantage, je vous invite à consulter les nombreuses ressources et outils disponibles sur Internet ou à me contacter.

Spécifications de notre DSL


Notre outil va donc interpréter la saisie du diagramme à partir d'une grammaire : encore faut-il spécifier cette grammaire. Pour cela, reprenons les possibilités offertes du site websequencediagrams :

Les signaux

Les signaux permettent de représenter une interaction entre deux acteurs de la façon suivante :
# This is a comment.            
Alice->Bob: Filled arrow
Alice->>Bob: Open arrow
Bob-->Alice: Dotted line
Bob-->>Alice: Dotted Line, open arrow
Bob<->Alice: Double arrow

Les participants sont automatiquement créés dès qu'ils sont utilisés. Utilisez la syntaxe "-->" pour dessiner une ligne en pointillé.

Le changement d'ordre des participants

Si vous souhaitez que les participants soient affichés dans un ordre différent que leur utilisation, vous devez les déclarer au préalable en tête de description en utilisant le mot clé "participant". Vous pouvez aussi les renommer afin de faciliter la saisie du diagramme.
participant Bob
participant Alice
participant "I have a really\nlong name" as L

Alice->Bob: Authentication Request
Bob->Alice: Authentication Response
Bob->L: Log transaction


Signal à soi-même

Un participant peut s'envoyer un signal à lui-même : celui-ci sera représenté par une flèche qui reviendra vers lui.
Alice->Alice: This is a signal to self.\nIt also demonstrates \nmultiline \ntext.

Grouper des signaux ensemble

Vous pouvez grouper des signaux ensemble en utilisant les mots-clés "alt/else", "opt" et "loop". Chacun d'eux peut prendre une description qui s'affichera dans l'entête du groupe. Utilisez le mot-clé "end" pour fermer le groupe. Les groupes peuvent être imbriqués.
Alice->Bob: Authentication Request
alt successful case
Bob->Alice: Authentication Accepted
else some kind of failure
Bob->Alice: Authentication Failure
opt
    loop 1000 times
        Alice->Bob: DNS Attack
    end
end
else Another type of failure
Bob->Alice: Please repeat
end

Les notes

Vous pouvez ajouter des notes à votre diagramme. Ces notes peuvent être placées à la gauche du participant ou à sa droite. De plus, vous pouvez centrer une note au-dessus de un ou plusieurs participants.
participant Alice
participant Bob

note left of Alice 
This is displayed 
left of Alice.
end note
note right of Alice: This is displayed right of Alice.
note over Alice: This is displayed over Alice.
note over Alice, Bob: This is displayed over Bob and Alice.

Et bien plus encore...

Le site websequencediagrams intègre encore bien d'autres comportements. Le but ici n'est pas de réécrire l'ensemble des fonctionnalités de ce dernier mais plutôt d'avoir un sujet de base intéressant pour illustrer l'utilisation de divers outils techniques.

Vous l'avez certainement remarqué, le site websequencediagrams propose différentes visualisations de la représentation graphique du diagramme : nous verrons plus tard si il est intéressant de présenter le développement de ce type de fonctionnalité.

L'outil d'interprétation

En parlant d'outils, nous avons besoin d'un outil qui nous permettra d'interpréter la saisie de l'utilisateur. Dans le monde Java l'outil Antlr est parfait pour la déclaration de grammaires. Dans le monde JavaScript, il existe quelques outils qui semblent également pertinents. Nous avons noté  :


Les fonctionnalités que nous allons mettre en œuvre


Les fonctionnalités qui seront prises en charges seront a minima les suivantes :
  • Les fonctionnalités de base d'un éditeur (ouverture/enregistrement des diagrammes et export de la représentation graphique).
  • Interprétation de la saisie utilisateur.
  • Affichage de la représentation au fur et à mesure de la saisie (ainsi que des erreurs d'interprétation).
Par la suite, nous pourrons ajouter des fonctionnalités (par exemple de nouvelles interactions, un changement de style de la représentation, ...).

Voilà, le décor est posé. il n'y a plus qu'à se mettre au travail....