UML
Diagramme de classe
Partie #1/3

Introduction

Cet article se consacre au langage UML pour la création de diagrammes de classes. Il ne traite pas d'UML dans son ensemble, mais se focalise sur la manière de construire ces diagrammes à l'aide de symboles standardisés. L'objectif est d'expliquer la signification de ces symboles et de vous permettre de générer des diagrammes de classe par programmation grâce à une bibliothèque PHP spécialement conçue à cet effet.

L'article est divisé en 3 parties :

1. Partie 1 : le diagramme de classe et les relations entre classes
2. Partie 2 : les autres symboles
3. Partie 3 : exemple complet et code de la librairie

En construction

La librairie trql.svg.uml.class.php, notre librairie de classes PHP qui rassemble les symboles nécessaires, est en construction. Elle sera disponible à la parution de la partie 3 de l'article.

trql.svg.uml.class.php et ses dépendances

trql.svg.uml.class.php utilise d'autres classes générales.

Par exemple, le symbole de diagramme de classe utilise 3 rectangles dont le dessin est laissé aux soins d'une classe SVGRect définie dans trql.svg.class.php.

L'ensemble du code fourni SERA disponible en accès libre sous licence Creative Commons Attribution .

trql.svg.uml.class.php et ses exemples

La partie 3 de cette série d'articles fournira un .zip regroupant tout le code nécessaire pour créer les symboles et reconstruire l'exemple complet qui sera fourni. Vous aurez là le code de trql.svg.uml.class.php et d'autres classes dont dépend la partie spécifiquement UML.

Chaque classe de la librairie UML est flanquée d'un exemple DANS LE CODE DE LA CLASSE. Ces exemples sont pleinement réproduits dans les articles.

trql.svg.uml.class.php et le mode debug

Vous verrez que je peux faire usage du mode debug dans l'utilisation de chaque symbole des classes de trql.svg.uml.class.php. Il s'agit d'un mode où les points de contrôle importants du graphique SVG sont mis en évidence pour la construction même du symbole : cela aide à visualiser les points à partir duquel le graphique est construit. Cliquer ici pour visualiser l'article en mode debug de telle sorte que vous preniez acte des points importants de chaque symbole.

Les symboles de cet article

TOUS les symboles de cet article sont écrits en PHP grâce à la librairie générant ainsi des SVGs. Chaque symbole est téléchargeable.

Si vous regardez attentivement le code de création des symboles vous y verrez l'utilisation d'une rotation (e.g. $symbol->rotate = 0;). Cette propriété — ici, jamais utilisée — permet d'effectuer une rotation du symbole en fonction du diagramme de classe. Par exemple, il se pourrait que vous deviez incliner un symbole d'association : c'est en jouant sur cette propriété que vous pourrez le faire.

Je fournis néanmoins 1 exemple de symbole sur lequel une légère rotation est permise : le symbole d'association. Vous pouvez en effet jouer d'une rotation entre -15° et +15°. Nous verrons, plus tard, comment nous servir de cette propriété.

Diagramme de classe

On représente un diagramme de classe par 3 rectangles empilés : le premier rectangle sert à indiquer le nom de la classe, le deuxième rectangle sert à mentionner les attributs / propriétés, tandis que le troisième sert à indiquer les opérations / méthodes.

La figure exprimée ci-dessous ne renseigne aucun nom de classe, aucun attribut et aucune opération : je réserve à la partie 3 de cette série d'articles la construction pas à pas de chaque élément.

Symbole UML

Download

Code de création du symbole UML (code PHP)

// https://trql.fm/test.uml.classdiagram.php
$SVG                    = new SVG();

$SVGWidth               = 500;
$SVGHeight              = 500;

$symbol                 = new SVGUmlClassDiagram();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 15;       // x of the top rectangle
$symbol->y              = 10;       // y of the top rectangle
$symbol->w              = 300;      // width of the diagram
$symbol->h              = 180;      // height of the diagram

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond
$symbol->cargo          = 'class-diagram';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth    = 3;

$SVG->add( $symbol );

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg id=\"{$symbol->id}\" class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<p class=\"download\"><a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a></p>\n";

Le nom des classes statiques est indiqué en italique.

Les propriétés publiques sont précédées d'un +.

Les propriétés privées sont précédées d'un -.

On peut avoir des guillemets («…») qui entourent des mots-clés : ce sont des mots qu'on veut associer à des éléments. On peut disposer de mots-clefs sur le nom des classes ou sur des attributs/propriétés ou sur des méthodes.

Dans la liste des méthodes d'une classe, celle qui est précédée du mot-clef «constructor» est celle par laquelle on crée une instance de la classe en question.

Les propriétés dérivées sont précédées d'un slash ('/').

Nous reviendrons à ces notions dans la partie 3 de l'article.

Relations

Les classes ont des relations entre elles : elles peuvent s'étendre au travers de la notion d'héritage (inheritance), elles peuvent mutuellement interagir l'une avec l'autre via une sorte d'association et elles peuvent faire partie les unes des autres via agrégation ou composition.

Toutes les relations s'expriment en UML par une (sorte de) flèche; la flèche en question prend une apparance différente en fonction de la relation exprimée.

Concepts de relations

Il existe plusieurs types de relations :

• Association : Une association représente une relation entre deux classes. Elle peut être unidirectionnelle ou bidirectionnelle. Par exemple, une classe «Étudiant» peut être associée à une classe «Cours» pour indiquer que chaque étudiant suit un ou plusieurs cours.
• Agrégation : L'agrégation est une forme spécifique d'association où une classe (l'agrégateur) contient d'autres objets (les agrégés). Par exemple, une classe «Université» peut agréger plusieurs objets de type «Département».
• Composition : La composition est une relation plus forte que l'agrégation. Elle indique qu'un objet est composé de plusieurs autres objets et qu'ils ont une durée de vie liée. Par exemple, une classe «Voiture» peut être composée de plusieurs objets «Roue».
• Héritage (ou généralisation) : L'héritage permet à une classe (la sous-classe) d'hériter des propriétés et méthodes d'une autre classe (la superclasse). Par exemple, une classe «Étudiant» peut hériter des propriétés de la classe «Personne».
• Dépendance : Une dépendance existe lorsque le changement d'une classe affecte une autre classe. Par exemple, si une classe «Facture» dépend de la classe «Client», toute modification dans la classe «Client» peut impacter la classe «Facture».

Les relations indiquées ci-avant ont aussi une sorte de quantification (multiplicity). Par exemple une équipe agile est composée de x membres. Il n'y aurait pas d'équipe sans les membres et les membres peuvent faire partie de plusieurs équipes. Ce sont des relations de 0 à n. Je reviendrai à cette notion dans les parties suivantes de la série de 3 articles.

// https://trql.fm/test.uml.association.php
$SVG                    = new SVG();

$SVGWidth               = 500;
$SVGHeight              = 500;

$symbol                 = new SVGUmlAssociation();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 15;       // x of the line (left)
$symbol->y              = 100;      // y of the line (top)
$symbol->w              = 300;      // width of the line
$symbol->aw             = 20;       // width of the end arrow
$symbol->ah             = 30;       // height of the end arrow

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond
$symbol->cargo          = 'association';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth    = 3;

$SVG->add( $symbol );

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg id=\"{$symbol->id}\" class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a>\n";

// https://trql.fm/test.uml.aggregation.php
$SVG                    = new SVG();

$symbol                 = new SVGUmlAggregation();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 20;       // x of the diamond (left) */
$symbol->y              = 75;       // y of the diamond (top) */
$symbol->w              = 50;       // width of the diamond */
$symbol->l              = 150;      // length of the line */

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond */
$symbol->cargo          = 'aggregation';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth   = 3;

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a>\n";

// https://trql.fm/test.uml.dependency.php
$SVG                    = new SVG();

$SVGWidth               = 500;
$SVGHeight              = 500;

$symbol                 = new SVGUmlDependency();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 15;       // x of the line (left)
$symbol->y              = 100;      // y of the line (top)
$symbol->w              = 300;      // width of the line
$symbol->aw             = 20;       // width of the end arrow
$symbol->ah             = 30;       // height of the end arrow

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond
$symbol->cargo          = 'dependency';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth    = 3;

$SVG->add( $symbol );

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg id=\"{$symbol->id}\" class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a>\n";

// https://trql.fm/test.uml.generalization.php
$SVG                    = new SVG();

$SVGWidth               = 500;
$SVGHeight              = 500;

$symbol                 = new SVGUmlGeneralization();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 15;       // x of the line (left)
$symbol->y              = 100;      // y of the line (top)
$symbol->w              = 300;      // width of the line
$symbol->aw             = 20;       // width of the end arrow
$symbol->ah             = 30;       // height of the end arrow

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond
$symbol->cargo          = 'generalization';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth    = 3;

$SVG->add( $symbol );

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg id=\"{$symbol->id}\" class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a>\n";

// https://trql.fm/test.uml.composition.php
$SVG                    = new SVG();

$symbol                 = new SVGUmlComposition();
$symbol->debug          = isset( $_GET['debug'] );

$symbol->x              = 20;       // x of the diamond (left) */
$symbol->y              = 75;       // y of the diamond (top) */
$symbol->w              = 50;       // width of the diamond */
$symbol->l              = 150;      // length of the line */

$symbol->rotate         = 0;        // Angle of the whole group starting from the center of the diamond */
$symbol->cargo          = 'composition';
$symbol->id             = 'SVG_' . $symbol->cargo;

$symbol->strokeWidth   = 3;

$bg                     = $_GET['bg'] ?? 'lightyellow';

$SVG->add( $symbol );

echo "<svg class=\"uml shadowLight\" xmlns=\"http://www.w3.org/2000/svg\" style=\"background: {$bg};\">\n";
    echo $SVG;
echo "</svg>\n";

echo "<a href=\"data:image/svg+xml,\" download=\"{$symbol->cargo}.svg\" onclick=\"return copySVG( this,'{$symbol->id}');\">Download</a>\n";