Introduction : Maîtriser les diagrammes en tant que code avec PlantUML et Visual Paradigm
Pourquoi utiliser PlantUML pour les diagrammes en tant que code ? Quels sont les avantages ?
PlantUML est un outil open source qui vous permet de créer des diagrammes UML à partir de descriptions en texte brut. Voici les principaux avantages :
1. Compatible avec le contrôle de version
-
Les diagrammes basés sur du texte peuvent être stockés dans des dépôts Git
-
Facile à suivre les modifications, à examiner les différences et à collaborer
-
Pas de fichiers binaires difficiles à fusionner
2. Maintenabilité
-
Facile à mettre à jour et à modifier les diagrammes
-
Style cohérent pour tous les diagrammes
-
Composants et modèles réutilisables
3. Centré sur les développeurs
-
Écrivez des diagrammes en code (pas de glisser-déposer)
-
S’intègre aux IDE et aux outils de documentation
-
Génération automatique de diagrammes à partir du code
4. Intégration des outils
-
Fonctionne avec le chatbot IA de Visual Paradigm pour des suggestions de diagrammes intelligentes
-
VPasCode offre une expérience d’édition améliorée
-
Prend en charge plusieurs formats de sortie (PNG, SVG, PDF)
5. Large prise en charge des diagrammes
-
Diagrammes de classes, diagrammes de séquence, diagrammes d’activité
-
Diagrammes de cas d’utilisation, diagrammes de composants, diagrammes de déploiement
-
Et bien d’autres types de diagrammes spécialisés
Outils : Chatbot IA de Visual Paradigm + VPasCode
Chatbot IA de Visual Paradigm
-
Suggestions intelligentes: Obtenez des recommandations alimentées par l’IA pour les structures de diagrammes
-
Du langage naturel au diagramme: Décrivez votre système en anglais simple, obtenez du code PlantUML
-
Bonnes pratiques: Apprenez les modèles et conventions de diagrammes optimaux
VPasCode
-
Éditeur amélioré: Mise en évidence de la syntaxe, auto-complétion, détection d’erreurs
-
Aperçu en direct: Voyez votre diagramme se mettre à jour en temps réel pendant que vous tapez
-
Intégration: Fonctionne de manière transparente avec la suite complète d’outils de modélisation de Visual Paradigm
Exemples de diagrammes PlantUML
1. Diagramme de classes
@startuml
class Client {
-idClient: String
-nom: String
-email: String
+getInfosClient(): void
+mettreAJourEmail(nouvelEmail: String): void
}
class Commande {
-idCommande: String
-dateCommande: Date
-montantTotal: Double
+calculerTotal(): Double
+passerCommande(): void
}
class Produit {
-idProduit: String
-nomProduit: String
-prix: Double
+getPrix(): Double
+mettreAJourPrix(nouveauPrix: Double): void
}
Client "1" --> "*" Commande : passe
Commande "*" --> "*" Produit : contient
@enduml
2. Diagramme de séquence
@startuml
acteur Utilisateur
participant "Navigateur Web" comme Navigateur
participant "Passerelle API" comme Passerelle
participant "Service d'authentification" comme Auth
participant "Service utilisateur" comme ServiceUtilisateur
Utilisateur -> Navigateur : Demande de connexion
Navigateur -> Passerelle : POST /api/login
Passerelle -> Auth : Valider les identifiants
Auth -> Auth : Vérifier la base de données
Auth --> Passerelle : Résultat d'authentification
Passerelle -> ServiceUtilisateur : Obtenir le profil utilisateur
ServiceUtilisateur --> Passerelle : Données utilisateur
Passerelle -> Navigateur : Réponse de connexion
Navigateur -> Utilisateur : Afficher le tableau de bord
@enduml
3. Diagramme d’activité
@startuml
début
:Recevoir la commande;
si (Paiement valide ?) alors (oui)
:Traiter le paiement;
:Mettre à jour l'inventaire;
:Générer la facture;
:Envoyer l'email de confirmation;
sinon (non)
:Rejeter la commande;
:Notifier le client;
finsi
:Expédier le produit;
fin
@enduml
4. Diagramme de cas d’utilisation
@startuml
gauche à droite
acteur "Client" comme Client
acteur "Administrateur" comme Admin
rectangle "Système de commerce électronique" {
casdutilisation "Parcourir les produits" comme UC1
casdutilisation "Passer une commande" comme UC2
casdutilisation "Gérer l'inventaire" comme UC3
casdutilisation "Voir les rapports" comme UC4
casdutilisation "Traiter un remboursement" comme UC5
}
Client --> UC1
Client --> UC2
Admin --> UC3
Admin --> UC4
Admin --> UC5
UC2 ..> UC5 : étend
@enduml
5. Diagramme de composants
@startuml
package "Frontend" {
[Application Web] as WebApp
[Application Mobile] as MobileApp
}
package "Services Backend" {
[Passerelle API] as Gateway
[Service d'authentification] as AuthService
[Service de commande] as OrderService
[Service de paiement] as PaymentService
[Service de notification] as NotificationService
}
database "Base de données" as DB
WebApp --> Gateway
MobileApp --> Gateway
Gateway --> AuthService
Gateway --> OrderService
Gateway --> PaymentService
OrderService --> NotificationService
AuthService --> DB
OrderService --> DB
PaymentService --> DB
@enduml
6. Diagramme de déploiement
@startuml
node "Équilibreur de charge" as LB {
node "Serveur Web 1" as WS1
node "Serveur Web 2" as WS2
}
node "Serveur d'application" as AppServer {
composant "Logique métier" as BL
composant "Couche d'accès aux données" as DAL
}
node "Serveur de base de données" as DBServer {
database "Base de données principale" as PrimaryDB
database "Base de données répliquée" as ReplicaDB
}
LB --> WS1
LB --> WS2
WS1 --> AppServer
WS2 --> AppServer
AppServer --> DBServer
PrimaryDB ..> ReplicaDB : réplique
@enduml
7. Diagramme d’états
@startuml
state "Commande créée" as Created
state "Paiement en attente" as PaymentPending
state "Paiement confirmé" as PaymentConfirmed
state "Traitement" as Processing
state "Expédié" as Shipped
state "Livré" as Delivered
state "Annulé" as Cancelled
[*] --> Created
Created --> PaymentPending : Soumettre la commande
PaymentPending --> PaymentConfirmed : Paiement réussi
PaymentPending --> Cancelled : Échec du paiement
PaymentConfirmed --> Processing : Démarrer le traitement
Processing --> Shipped : Expédier la commande
Shipped --> Delivered : Livraison terminée
Cancelled --> [*]
Delivered --> [*]
@enduml
8. Diagramme d’objets
@startuml
object Client1 {
customerId = "C001"
name = "John Doe"
email = "[email protected]"
}
object Commande1 {
orderId = "ORD-1001"
orderDate = "2026-08-20"
totalAmount = 299.99
}
object Produit1 {
productId = "P001"
productName = "Ordinateur portable"
price = 299.99
}
Client1 --> Commande1
Commande1 --> Produit1
@enduml
9. Diagramme de chronologie
@startuml
robust "Client" as Client
robust "Server" as Server
@0
Client est inactif
@10
Client est "en train d'envoyer une demande"
@20
Server est en cours de traitement
@30
Server est "en train d'envoyer une réponse"
@40
Client est "en train de recevoir une réponse"
@50
Client est inactif
@enduml
10. Carte mentale
@startmindmap
* Gestion de produit
** Stratégie
*** Étude de marché
*** Analyse concurrentielle
*** Planification de la feuille de route
** Exécution
*** Planification de sprint
*** User Stories
*** Affinage du backlog
** Analyses
*** Métriques utilisateurs
*** Tests A/B
*** Taux de conversion
** Parties prenantes
*** Équipe d'ingénierie
*** Équipe de design
*** Leaders d'entreprise
*** Clients
@endmindmap
11. Maquette (Salt)
@startsalt
{+
{"Page de connexion"
["Nom d'utilisateur : "]
["Mot de passe : "]
<"Connexion">
<"Mot de passe oublié ?">
}
}
@endsalt
12. Diagramme de réseau
@startuml
node "Internet" as Internet
node "Pare-feu" as FW
node "DMZ" as DMZ {
node "Serveur Web" as WS
node "Serveur DNS" as DNS
}
node "Réseau Interne" as Internal {
node "Serveur d'Application" as AppSrv
node "Base de données" as DB
node "Serveur de Fichiers" as FileSrv
}
Internet --> FW
FW --> DMZ
DMZ --> Internal
WS --> AppSrv
AppSrv --> DB
@enduml
13. Diagramme de Gantt
@startgantt
titre Calendrier du Projet
projectstarts 2026-09-01
-- Planification --
[Collecte des exigences] commence le 2026-09-01 et dure 10 jours
[Phase de conception] commence le 2026-09-11 et dure 14 jours
-- Développement --
[Développement Backend] commence le 2026-09-25 et dure 20 jours
[Développement Frontend] commence le 2026-09-25 et dure 18 jours
-- Tests --
[Tests unitaires] commence le 2026-10-15 et dure 10 jours
[Tests d'intégration] commence le 2026-10-25 et dure 7 jours
-- Déploiement --
[Déploiement en production] commence le 2026-11-01 et dure 3 jours
@endgantt
14. Diagramme Entité-Relation
@startuml
entité "Client" as Customer {
* customer_id : number <<généré>>
--
* name : string
email : string
phone : string
}
entité "Commande" as Order {
* order_id : number <<généré>>
--
* customer_id : number
order_date : date
total_amount : decimal
}
entité "Produit" as Product {
* product_id : number <<généré>>
--
* product_name : string
price : decimal
stock_quantity : number
}
entité "Article de Commande" as OrderItem {
* order_item_id : number <<généré>>
--
* order_id : number
* product_id : number
quantity : number
unit_price : decimal
}
Customer ||--o{ Order : passe
Order ||--|{ OrderItem : contient
Product ||--o{ OrderItem : inclut
@enduml
15. Diagramme d’Architecture (Style Modèle C4)
@startuml
skinparam backgroundColor white
skinparam rectangleBackgroundColor white
rectangle "Contexte du Système" {
rectangle "Client" as Customer #LightBlue
rectangle "Plateforme E-Commerce" as Platform #LightGreen
rectangle "Fournisseur de Paiement" as Payment #LightYellow
rectangle "Partenaire d'Expédition" as Shipping #LightCoral
}
Customer --> Platform : Utilise
Platform --> Payment : Traite les Paiements
Platform --> Shipping : Organise la Livraison
rectangle "Diagramme de Conteneurs" {
rectangle "Application Web" as WebApp #LightBlue
rectangle "Application Mobile" as MobileApp #LightBlue
rectangle "API" as API #LightGreen
rectangle "Base de données" as DB #LightYellow
}
WebApp --> API : API REST
MobileApp --> API : API REST
API --> DB : Requêtes SQL
@enduml
Bonnes Pratiques
1. Gardez les diagrammes simples
-
Concentrez-vous sur un seul aspect par diagramme
-
Évitez la surcharge avec trop d’éléments
2. Utilisez une dénomination cohérente
-
Suivez les conventions de dénomination dans l’ensemble de vos diagrammes
-
Utilisez des noms significatifs pour les classes, les acteurs et les composants
3. Documentez vos diagrammes
-
Ajoutez des titres et des descriptions
-
Utilisez des notes pour un contexte supplémentaire
4. Modularisez les systèmes complexes
-
Décomposez les grands systèmes en diagrammes plus petits et gérables
-
Utilisez le regroupement par paquets pour l’organisation
5. Exploitez les outils d’IA
-
Utilisez le chatbot IA de Visual Paradigm pour la structure initiale du diagramme
-
Affinez et personnalisez avec VPasCode
6. Contrôle de version
-
Validez les fichiers PlantUML dans Git
-
Utilisez des messages de validation significatifs décrivant les modifications des diagrammes
Bien démarrer avec Visual Paradigm + VPasCode
-
Installez Visual Paradigm avec le plugin VPasCode
-
Créez un nouveau fichier PlantUML (extension .puml)
-
Commencez à taper votre code de diagramme
-
Utilisez le chatbot IA pour des suggestions en décrivant votre système
-
Aperçu en temps réel pendant que vous modifiez
-
Exporter vers votre format souhaité (PNG, SVG, PDF)
Conclusion
PlantUML combiné au chatbot IA de Visual Paradigm et à VPasCode offre une approche puissante et conviviale pour les développeurs afin de créer des diagrammes professionnels. La nature basée sur le texte garantit la maintenabilité, la compatibilité avec le contrôle de version et une collaboration facile, tandis que les outils alimentés par l’IA accélèrent la création de diagrammes et assurent le respect des meilleures pratiques.
Que vous documentiez l’architecture logicielle, planifiiez des projets ou communiquiez des conceptions de systèmes, PlantUML offre une solution complète qui s’adapte à vos besoins.
Cette publication est également disponible en English.