Aller au contenu
Français
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

Générateur de diagramme de classes

Écrivez du code classDiagram avec classes, membres et relations et voyez immédiatement le diagramme UML.

Traité localement dans votre navigateur

Options
0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que Générateur de diagramme de classes ?

Un diagramme de classes UML documente la structure d’un modèle orienté objet : les classes avec leurs attributs et méthodes, et les relations entre elles, comme l’héritage, la composition, l’agrégation et l’association avec multiplicité.

Cet outil affiche du code Mermaid classDiagram ; l’exemple montre déjà un arbre d’héritage et une association étiquetée. L’option de direction (haut-bas, gauche-droite, bas-haut, droite-gauche) insère ou remplace en toute sécurité l’instruction « direction » de votre code, et l’option de thème change les couleurs. Les erreurs de syntaxe sont signalées avec la ligne et le jeton attendu.

Comment ça marche ?

  1. Modifiez le code classDiagram : définissez chaque classe avec un bloc { } et un membre par ligne.
  2. Ajoutez des relations comme « Animal <|-- Dog » ou « Owner \"1\" --> \"*\" Animal : owns ».
  3. Choisissez la direction de la mise en page et un thème.
  4. Exportez le diagramme en SVG ou PNG pour des documents de conception et des présentations.

Cas d'usage courants

  • Documenter le modèle de domaine d’un service dans un document de conception.
  • Expliquer une hiérarchie d’héritage ou un patron de conception à une équipe.
  • Esquisser des classes avant de coder, puis conserver la source Mermaid dans le dépôt.
  • Préparer des figures UML pour un cours ou un article technique.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

classDiagram
    direction TB
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +fetch() void
    }
    class Cat {
        +climb() void
    }
    class Owner {
        +String name
        +adopt(Animal pet) void
    }
    Animal <|-- Dog
    Animal <|-- Cat
    Owner "1" --> "*" Animal : owns

Confidentialité

Générateur de diagramme de classes s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

Cet outil attend du code Mermaid classDiagram ; il n’existe pas de plan simplifié pour les classes. Mermaid implémente un sous-ensemble pratique d’UML et ne vérifie pas que votre modèle est cohérent sur le plan sémantique.

Questions fréquentes

Quelles flèches de relation sont disponibles ?

<|-- héritage, *-- composition, o-- agrégation, --> association, -- lien, ..> dépendance, ..|> réalisation et .. lien pointillé. Ajoutez des libellés après deux-points et des multiplicités entre guillemets.

Comment indiquer la visibilité ?

Préfixez les membres par + pour public, - pour privé, # pour protégé et ~ pour package. Ajoutez () pour faire d’un membre une méthode, par exemple +makeSound() void.

Que change l’option de direction ?

Elle règle la ligne « direction » dans classDiagram (TB, BT, LR ou RL). Si votre code n’en contient pas, la ligne est ajoutée juste après le mot-clé classDiagram.

Outils associés

Plus d'outils dans Markdown & diagrammes →