Loic : Ajout du rendu PlantUML sous chaque bloc de code existant

2026-04-02T17:41:31Z

Ajout du rendu PlantUML sous chaque bloc de code existant

Loic : Ajout de la page Catalogue PlantUML (20 cas d’usage)

2026-04-02T17:38:27Z

Ajout de la page Catalogue PlantUML (20 cas d’usage)

Nouvelle page

= Catalogue PlantUML – principaux cas d’usage =

Cette page présente plusieurs représentations réalisables avec '''PlantUML''', sous la forme d’exemples simples, lisibles et facilement réutilisables.

Chaque section contient :
* le cas d’usage visé ;
* un exemple minimal ;
* un code '''PlantUML''' autonome.

__TOC__

== 1. Diagramme de séquence ==
'''Usage :''' représenter des échanges entre acteurs, applications, API, bases de données ou services.

<syntaxhighlight lang="plantuml">
@startuml
actor Utilisateur
participant "Frontend" as Front
participant "API" as API
database "Base PostgreSQL" as DB

Utilisateur -> Front : saisit ses identifiants
Front -> API : POST /login
API -> DB : vérifier le compte
DB --> API : compte valide
API --> Front : token
Front --> Utilisateur : accès autorisé
@enduml
</syntaxhighlight>

== 2. Diagramme de classes ==
'''Usage :''' représenter une structure de données, un modèle métier ou l’organisation d’un code.

<syntaxhighlight lang="plantuml">
@startuml
class Utilisateur {
+id : UUID
+nom : String
+email : String
+seConnecter()
}

class Role {
+code : String
+libelle : String
}

class Session {
+token : String
+expiration : Instant
}

Utilisateur "1" -- "*" Role
Utilisateur "1" -- "0..*" Session
@enduml
</syntaxhighlight>

== 3. Diagramme de cas d’utilisation ==
'''Usage :''' montrer les fonctionnalités offertes par un système à ses utilisateurs.

<syntaxhighlight lang="plantuml">
@startuml
left to right direction

actor "Chef de projet" as CP
actor "Analyste" as A

rectangle "Plateforme d'analyse" {
usecase "Lancer une analyse" as UC1
usecase "Consulter les résultats" as UC2
usecase "Exporter un rapport" as UC3
}

A --> UC1
A --> UC2
CP --> UC2
CP --> UC3
@enduml
</syntaxhighlight>

== 4. Diagramme d’activité ==
'''Usage :''' représenter un processus, un enchaînement de traitements ou une procédure.

<syntaxhighlight lang="plantuml">
@startuml
start
:Réception du code source;
:Préparation de l'analyse;
if (Langage supporté ?) then (oui)
:Exécuter les règles;
:Consolider les résultats;
else (non)
:Notifier l'absence de support;
endif
stop
@enduml
</syntaxhighlight>

== 5. Diagramme d’états ==
'''Usage :''' décrire le cycle de vie d’un objet, d’un dossier ou d’un ticket.

<syntaxhighlight lang="plantuml">
@startuml
[*] --> Brouillon
Brouillon --> EnRevue : soumettre
EnRevue --> Valide : approuver
EnRevue --> Rejete : refuser
Rejete --> Brouillon : corriger
Valide --> Archive : clôturer
Archive --> [*]
@enduml
</syntaxhighlight>

== 6. Diagramme de composants ==
'''Usage :''' présenter l’architecture logique d’une application ou la répartition des modules.

<syntaxhighlight lang="plantuml">
@startuml
component "Frontend Angular" as Front
component "API Spring Boot" as API
component "Moteur d'analyse" as Engine
database "PostgreSQL" as DB

Front --> API
API --> Engine
API --> DB
@enduml
</syntaxhighlight>

== 7. Diagramme de déploiement ==
'''Usage :''' montrer où les composants sont installés et comment ils communiquent.

<syntaxhighlight lang="plantuml">
@startuml
node "Poste utilisateur" {
artifact "Navigateur"
}

node "Serveur applicatif" {
artifact "frontend.war"
artifact "api.jar"
}

node "Serveur base de données" {
database "PostgreSQL"
}

"Navigateur" --> "frontend.war"
"api.jar" --> "PostgreSQL"
@enduml
</syntaxhighlight>

== 8. Diagramme d’objets ==
'''Usage :''' illustrer un exemple concret d’instances d’objets.

<syntaxhighlight lang="plantuml">
@startuml
object utilisateur1 {
id = 42
nom = "Dupont"
email = "dupont@example.test"
}

object roleAdmin {
code = "ADMIN"
libelle = "Administrateur"
}

utilisateur1 -- roleAdmin
@enduml
</syntaxhighlight>

== 9. Diagramme de packages ==
'''Usage :''' décrire l’organisation modulaire d’un code ou d’une architecture applicative.

<syntaxhighlight lang="plantuml">
@startuml
package "presentation" {
class Controleur
}

package "application" {
class ServiceMetier
}

package "infrastructure" {
class Repository
}

Controleur --> ServiceMetier
ServiceMetier --> Repository
@enduml
</syntaxhighlight>

== 10. Diagramme de timing ==
'''Usage :''' montrer l’évolution d’états au cours du temps.

<syntaxhighlight lang="plantuml">
@startuml
robust "Service" as S
concise "Cache" as C

@0
S is Arrêté
C is Vide

@10
S is Démarré
C is Chargement

@20
C is Prêt
@enduml
</syntaxhighlight>

== 11. Gantt ==
'''Usage :''' représenter une planification simple de travaux ou de jalons.

<syntaxhighlight lang="plantuml">
@startgantt
Project starts 2026-04-01

[Analyse initiale] lasts 5 days
[Revue d'architecture] starts at [Analyse initiale]'s end and lasts 3 days
[Rapport final] starts at [Revue d'architecture]'s end and lasts 2 days
@endgantt
</syntaxhighlight>

== 12. WBS – découpage des travaux ==
'''Usage :''' structurer un projet en lots, sous-lots et activités.

<syntaxhighlight lang="plantuml">
@startwbs
* Projet d'analyse
** Préparation
*** Collecte du code
*** Vérification du périmètre
** Analyse
*** Qualité
*** Sécurité
*** Architecture
** Restitution
*** Rapport
*** Présentation
@endwbs
</syntaxhighlight>

== 13. Mindmap ==
'''Usage :''' organiser visuellement des idées, thèmes ou axes d’analyse.

<syntaxhighlight lang="plantuml">
@startmindmap
* Dette logicielle
** Dette de code
*** duplication
*** complexité
** Dette d'architecture
*** couplage fort
*** dépendances cycliques
** Dette d'exploitation
*** déploiement manuel
*** supervision absente
@endmindmap
</syntaxhighlight>

== 14. Organigramme / schéma de flux ==
'''Usage :''' représenter un enchaînement logique simple, proche d’une procédure.

<syntaxhighlight lang="plantuml">
@startuml
start
:Recevoir la demande;
if (Périmètre complet ?) then (oui)
:Planifier l'analyse;
else (non)
:Demander les éléments manquants;
endif
stop
@enduml
</syntaxhighlight>

== 15. Schéma de topologie réseau simple ==
'''Usage :''' représenter des flux entre postes, proxy, services ou zones.

<syntaxhighlight lang="plantuml">
@startuml
node "Client VPN" as Client
node "Reverse proxy" as Proxy
node "OpenWebUI" as OWUI
node "Dependency-Track" as DT

Client --> Proxy : HTTPS
Proxy --> OWUI : 8080
Proxy --> DT : 8081
@enduml
</syntaxhighlight>

== 16. Vue d’architecture applicative simple ==
'''Usage :''' décrire une vue d’ensemble lisible sans entrer dans le détail UML formel.

<syntaxhighlight lang="plantuml">
@startuml
rectangle "Utilisateur" as User
rectangle "Portail Web" as Web
rectangle "API métier" as API
rectangle "Moteur d'analyse" as Engine
database "Référentiel" as Ref

User --> Web
Web --> API
API --> Engine
API --> Ref
@enduml
</syntaxhighlight>

== 17. Exemple de légende ==
'''Usage :''' ajouter une légende de lecture commune à plusieurs schémas.

<syntaxhighlight lang="plantuml">
@startuml
legend
|= Niveau |= Signification |
| Critique | Correction immédiate |
| Majeur | Correction à court terme |
| Mineur | Amélioration souhaitable |
endlegend

rectangle "Exemple"
@enduml
</syntaxhighlight>

== 18. Exemple d’écran / maquette fonctionnelle simple ==
'''Usage :''' esquisser rapidement une interface ou une disposition fonctionnelle.

<syntaxhighlight lang="plantuml">
@startuml
rectangle "Écran principal" {
rectangle "Menu" as Menu
rectangle "Filtres" as Filters
rectangle "Zone de résultats" as Results
rectangle "Détail" as Detail
}

Filters --> Results
Results --> Detail
@enduml
</syntaxhighlight>

== 19. Exemple de workflow métier ==
'''Usage :''' représenter un traitement métier de bout en bout.

<syntaxhighlight lang="plantuml">
@startuml
start
:Réception d'un dossier;
:Contrôle de complétude;
if (Dossier complet ?) then (oui)
:Instruction;
if (Avis favorable ?) then (oui)
:Validation;
else (non)
:Rejet motivé;
endif
else (non)
:Demande de complément;
endif
stop
@enduml
</syntaxhighlight>

== 20. Exemple de pipeline CI/CD ==
'''Usage :''' représenter un pipeline d’intégration et de livraison.

<syntaxhighlight lang="plantuml">
@startuml
start
:Commit du développeur;
:Déclenchement CI;
:Compilation;
if (Compilation OK ?) then (oui)
:Tests automatiques;
if (Tests OK ?) then (oui)
:Analyse de qualité;
if (Qualité acceptable ?) then (oui)
:Construction de l'artefact;
:Déploiement;
else (non)
:Blocage de la livraison;
endif
else (non)
:Correction des tests;
endif
else (non)
:Correction de la compilation;
endif
stop
@enduml
</syntaxhighlight>

== Limites à connaître ==
PlantUML est bien adapté :
* à la documentation ;
* à la démonstration ;
* aux schémas versionnables en texte ;
* à l’intégration dans un wiki ou un dépôt Git.

En revanche :
* le rendu BPMN natif n’est pas complet au sens d’un outil spécialisé ;
* les maquettes très visuelles sont moins naturelles qu’avec un outil graphique dédié ;
* les schémas très denses perdent rapidement en lisibilité.

== Conseils d’utilisation ==
* Préférer un diagramme simple par idée.
* Donner un titre clair à chaque schéma.
* Réutiliser des alias courts pour garder un code lisible.
* Limiter le nombre d’éléments affichés pour éviter les schémas surchargés.
* Conserver ces exemples comme base de départ pour vos propres modèles.

Catalogue PlantUML - Historique des versions

Loic : Ajout du rendu PlantUML sous chaque bloc de code existant

Loic : Ajout de la page Catalogue PlantUML (20 cas d’usage)

Loic : Ajout du rendu PlantUML sous chaque bloc de code existant

Loic : Ajout de la page Catalogue PlantUML (20 cas d’usage)