Diagramme de classes
Modélisez votre domaine et la structure de vos objets
Qu’est-ce qu’un Diagramme de classes ?
Un diagramme de classes décrit les types d’un système — attributs, méthodes et relations : héritage, composition, association. C’est le classique UML pour la modélisation de domaine et la conception logicielle.
Le diagramme de classes donne le meilleur de lui-même en revue de conception et à l’onboarding, quand un nouvel arrivant a besoin de la forme du domaine avant d’ouvrir le code. Il montre ce qui existe, ce que chaque type possède et ce dont il dépend — le couplage qu’une arborescence de dossiers masque. Il ne dit rien de l’exécution : ni ordre d’appel, ni cycle de vie, ni volumétrie. Et un diagramme juste aujourd’hui sera faux après le prochain refactoring si personne ne le maintient. Les types partagés sont redessinés dans chaque diagramme qui en a besoin.
Exemple en direct
classDiagram
class Order {
+String id
+Date createdAt
+total() Money
}
class Customer {
+String name
+String email
}
class OrderLine {
+int quantity
}
Customer "1" --> "*" Order
Order "1" *-- "*" OrderLineQuand l’utiliser
Erreurs fréquentes
La flèche d’héritage pointe vers le parent
Animal <|-- Dog signifie que Dog hérite d’Animal : le triangle creux se pose sur la classe de base. Écrire Dog <|-- Animal s’analyse sans erreur et inverse silencieusement votre hiérarchie. Lisez d’abord le côté du triangle : il nomme toujours le parent.
Les chevrons avalent les génériques
Un membre écrit +List<Item> lines s’affiche +List lines, parce que le navigateur traite <Item> comme une balise HTML. Mermaid utilise les tildes : +List~Item~ lines, et class Cart~Item~ pour une classe générique.
Une méthode sans parenthèses devient un attribut
+save se dessine dans le compartiment des attributs et +save() dans celui des méthodes. Ce sont les parenthèses seules qui tranchent, pas le type de retour. Le diagramme s’affiche quand même, donc l’erreur passe la relecture — ajoutez-les même sans argument.
Syntaxe de base
classDiagram
class Animal {
+String name
+makeSound() void
}
Animal <|-- Dog : inheritanceclass Invoice { -String id +total(Money vat) Money }Préfixez les membres : + public, - privé, # protégé, ~ package. Un type écrit après les parenthèses est le type de retour ; sans parenthèses, la ligne est un attribut.
Customer "1" o-- "0..*" Invoice : ownsLes cardinalités s’écrivent entre guillemets de chaque côté et le libellé après les deux-points nomme la relation. Elle se lit dans le sens où la ligne est écrite.
class Gateway { <<interface>> }Un stéréotype entre doubles chevrons marque une interface, une classe abstraite, une énumération ou un service. Il s’affiche sur sa propre ligne, au-dessus du nom de la classe.
namespace Billing { class Invoice }Un namespace regroupe des classes dans un cadre étiqueté : un grand diagramme reste lisible et reflète les frontières de paquets ou de modules déjà en place dans le code.
Questions sur ce diagramme
Quelles relations Mermaid prend-il en charge ?
Héritage (<|--), composition (*--), agrégation (o--), association (-->), dépendance (..>) et réalisation (..|>), chacune avec cardinalités et libellés optionnels.
Puis-je générer un diagramme de classes depuis du code ?
Collez vos classes ou décrivez votre domaine : l’IA extrait entités, attributs et relations dans un diagramme de classes propre.
Les diagrammes de classes s’affichent-ils dans Notion ou Confluence ?
Notion rend le Mermaid dans un bloc de code. Confluence n’a pas de support natif : utilisez une macro du Marketplace ou collez un SVG exporté, qui reste net à tout niveau de zoom et se remplace sur place quand le modèle change.
Puis-je décider où Mermaid place les classes ?
Pas directement. La mise en page est automatique ; vos seuls leviers sont direction LR ou TB, le regroupement des classes en namespaces et l’ordre des déclarations de relations. Pour une disposition figée, exportez le SVG et retouchez-le dans un éditeur vectoriel.
Puis-je relier une classe à son fichier source ?
Oui. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" transforme la boîte en lien et ajoute une infobulle. L’ancre vit à l’intérieur du SVG : elle survit à un export SVG et disparaît dès que vous exportez en PNG.
Mermaid gère-t-il les membres abstraits ou statiques ?
Oui. Un astérisque final marque un membre abstrait et un dollar final le marque statique — +area()* float, +unit()$ Shape. Le rendu suit la convention UML : italique pour l’abstrait, souligné pour le statique. Une classe entière prend un stéréotype <<abstract>> dans son corps.
Diagramme de classes ou un autre type de diagramme ?
Diagramme de classes ou diagramme entité-association ?
Mêmes boîtes, publics différents. Le diagramme entité-association décrit tables, colonnes et clés telles qu’elles existent en base ; le diagramme de classes décrit types, comportements et héritage tels qu’ils existent dans le code. Si les boîtes ont des méthodes, c’est un diagramme de classes.
Diagramme de classes ou diagramme d’états ?
Ils modélisent le même objet sous deux angles. Le diagramme de classes dit ce qu’est une commande : ses champs, ses relations, ses méthodes. Le diagramme d’états dit ce qu’elle traverse : brouillon, payée, expédiée, et les événements entre les deux. Un domaine riche a besoin des deux.
Créez votre Diagramme de classes maintenant
Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.
Ouvrir Mermaid Studio