Qu’est-ce qu’un diagramme de classes ?
Un Diagramme de classes diagramme structurel diagramme UML qui visualise l’architecture statique d’un système logiciel orienté objet. En tant que type de diagramme UML indispensable, il représente les classes individuelles, les interfaces et les modèles de données au sein de votre application, en documentant explicitement leurs champs internes (attributs), leurs fonctions opérationnelles (méthodes) et les relations structurelles qui les lient ensemble. Ce plan est essentiel pour les ingénieurs logiciels qui doivent traduire des conceptions de domaine de haut niveau en structures d’objets propres et maintenables.type de diagramme UMLil représente les classes individuelles, les interfaces et les modèles de données au sein de votre application, en documentant explicitement leurs champs internes (attributs), leurs fonctions opérationnelles (méthodes) et les relations structurelles qui les lient ensemble. Ce plan est essentiel pour les ingénieurs logiciels qui doivent traduire des conceptions de domaine de haut niveau en structures d’objets propres et maintenables.
Avec Mermaid.jsvous pouvez esquisser vos modèles de données et vos services système à l’aide de définitions intuitives basées sur le texte. Le moteur de mise en page calcule automatiquement les tailles des boîtes, structure les compartiments de données UML standards et aligne les flèches relationnelles sur votre canevas sans aucun surcroît de formatage manuel.
Guide de syntaxe fondamentale : éléments et constructions
Pour concevoir un diagramme de classes UML précis et conforme aux normes dans Mermaid, vous devez maîtriser les déclarations de membres, les modificateurs d’accès et les flèches de relations structurelles.
1. Déclarer des classes et des compartiments de classes
Vous pouvez définir une classe en utilisant deux formats valides. Pour une classe simple, utilisez le mot-clé classsuivi du nom de la classe. Si vous souhaitez inclure immédiatement des champs et des méthodes, utilisez des accolades en fin de ligne pour créer un bloc de corps clair :
classDiagram
class UserProfile {
+String username
+String email
+updateEmail(newEmail) void
}
2. Ajouter des modificateurs de visibilité / d’accès
Pour documenter les règles standard d’encapsulation UML, placez un symbole spécifique directement avant le nom de votre attribut ou de votre méthode afin de définir son niveau de visibilité :
+**Public :** Accessible depuis n’importe quelle autre classe.-**Privé :** Accessible uniquement au sein de la classe déclarante.#**Protégé :** Accessible au sein de la classe et de ses sous-classes.~**Paquet / Interne :** Accessible dans les limites du même paquet.
classDiagram
class CompteBancaire {
-double solde
#String titulaireCompte
+getSolde() double
}
3. Maîtriser les flèches de relation et les liens d’héritage
Pour montrer comment les classes interagissent dans votre modèle de diagramme UML, reliez leurs identifiants à l’aide de chaînes de relation spécifiques. Dans Mermaid, le sens de la ligne est important : la pointe de flèche indique la classe parente ou conteneur.
- Héritage / Généralisation (flèche pointillée ou pleine) :
Enfant --|> Parent(Représente une relation « est un »). - Réalisation / Implémentation :
Classe ..|> Interface(Représente une classe qui remplit un contrat d’interface). - Composition (Diamant plein) :
Enfant --* Parent(Représente une propriété stricte ; si le parent meurt, l’enfant meurt aussi). - Agrégation (Diamant clair) :
Enfant --o Parent(Représente une relation de collection lâche ; l’enfant peut exister indépendamment). - Dépendance :
ClasseA ..> ClasseB(Représente une référence temporaire au moment de l’exécution).
classDiagram
Voiture --|> Véhicule : "Hérite de"
Moteur --* Voiture : "Fait partie de"
Meilleures pratiques pour des agencements d’architecture de classes propres
- Regrouper visuellement les membres de la classe : Regroupez toujours vos variables de classe en haut du bloc de corps et vos fonctions en bas. Ce disposition correspond aux structures de classe standard des IDE et rend vos diagrammes immédiatement lisibles.
- Spécifiez les types de retour : Lors de la déclaration des méthodes, ajoutez le type de retour à la fin de la ligne de méthode (par exemple,
+fetchData() DataSet). Cela fournit à votre équipe d’ingénierie un contexte d’implémentation précis. - Maintenez la multiplicité claire : Pour indiquer les nombres d’éléments dans un tableau ou la taille d’une collection, ajoutez directement les chaînes de texte de multiplicité au cadre de la ligne de relation (par exemple,
Client "1" --o "plusieurs" Commande).
Exemples réels de diagrammes de classes Mermaid.js
Exemple 1 : Sous-système domaine Passerelle de paiement (Encapsulation et Interfaces)
Ce plan fonctionnel modélise un service de domaine de paiement en ligne. Il montre comment utiliser les modificateurs d’accès, regrouper les membres de classe et implémenter proprement les relations d’interface.
classDiagram
class PaymentProcessor {
<<interface>>
+processPayment(montant) boolean
+refundPayment(idTxn) boolean
}
class StripeGateway {
-String apiKey
-String endpointUrl
+processPayment(montant) boolean
+refundPayment(idTxn) boolean
-logTransaction(statut) void
}
class PayPalGateway {
-String merchantId
+processPayment(montant) boolean
+refundPayment(idTxn) boolean
}
StripeGateway ..|> PaymentProcessor : "Implémente"
PayPalGateway ..|> PaymentProcessor : "Implémente"
Analyse syntaxique : Le <<interface>> balise marque clairement `PaymentProcessor` comme un contrat architectural de haut niveau. Les deux classes d’implémentation concrètes de passerelle utilisent des champs privés (-apiKey) pour les identifiants sensibles, tout en exposant des routines de paiement publiques (+processPayment) liées par la flèche de réalisation (..|>).
Exemple 2 : Moteur de traitement des commandes d’entreprise (Composition et multiplicité)
Ce plan système avancé modélise un schéma complexe de gestion des commandes e-commerce, illustrant comment documenter la propriété structurelle et le nombre d’objets à travers plusieurs classes interconnectées.
classDiagram
class Customer {
+int customerId
+String name
+placeOrder() Order
}
class Order {
+int orderId
+Date dateCreated
-String internalStatus
+calculateTotal() double
}
class OrderItem {
+int itemId
+int quantity
+double pricePerUnit
}
class Address {
+String street
+String city
+String postalCode
}
Client "1" --o "plusieurs" Commande : "possède"
ItemCommande "1..*" --* "1" Commande : "compose"
Adresse "1" --> Commande : "expédiée à"
Analyse syntaxique : Cet exemple illustre la différence entre l’agrégation et la composition. La flèche en diamant plein (--*) montre qu’un `OrderItem` est étroitement lié à un `Order` (si une commande est supprimée, ses articles individuels sont également détruits). À l’inverse, la flèche en diamant clair (--o) indique qu’un `Customer` possède plusieurs commandes, mais que les deux entités peuvent exister indépendamment. Les chaînes de multiplicité (comme "1..*") définissent les exigences relationnelles du système.