Class diagram maker
Describe your classes, their fields and methods, and how they relate. The UML class diagram lays itself out, ready for a design review or the docs.
How to use the Class diagram maker
- Start from the class diagram template.
- Add a class with its members inside { }: +String name, +total() Money.
- Link classes: <|-- for inheritance, *-- for composition, --> for association.
- Download a PNG, SVG, PDF or Word file.
What you get
- Fields and methods with visibility (+ - #)
- Inheritance, composition, aggregation and association
- Multiplicity such as "1" and "*"
- Interfaces and abstract classes with <<annotations>>
About the Class diagram maker
Relationship arrows
<|-- is inheritance, *-- composition, o-- aggregation, --> association and ..> dependency. Add a label after a colon: Customer --> Order : places.
From existing code
Ask an AI assistant to turn your classes or TypeScript interfaces into a Mermaid classDiagram, then paste the answer here to check and export it.
Frequently asked questions
- How do I show inheritance?
- Write Parent <|-- Child. The hollow arrow points at the parent class.
- How do I mark an interface?
- Add <<interface>> on its own line inside the class body.
- Is my diagram uploaded?
- No. It is drawn in your browser.