UML class diagram maker
Click + Class, type the name and the attributes and drag it into place. To connect, use Connect blocks and pick the relationship type.
How to useClasses, attributes and relationships in one drawing
Available in: 
UML class diagram maker: what it is for
Type the classes with their attributes and methods, set the visibility (+, -, #, ~) and connect the classes with association, inheritance, composition, aggregation or dependency, with the multiplicity at each end. The diagram draws as you type.
The code uses the open Mermaid syntax, the same one GitHub, GitLab and Notion render, so you can paste the same text into your project documentation. The text is saved in your browser.
How to use
- Type the classes with their attributes and methods.
- Connect the classes with relationship arrows.
- Download the diagram as PNG or SVG.
When to use it
- Systems analysis coursework.
- Project documentation.
- Modeling the domain before coding.
Frequently asked questions
How do I write a class?
Use class Name { } and, inside the braces, one line per attribute or method. The leading sign sets the visibility: + public, - private, # protected and ~ package. Methods take parentheses and can have the return type after them, like +total() float.
How do I show inheritance, composition and aggregation?
With the arrows between classes: A <|-- B is inheritance (B inherits from A), A *-- B is composition, A o-- B is aggregation, A --> B is association and A ..> B is dependency. For multiplicity, put it in quotes on both sides, like Customer "1" --> "*" Order.
What language is this?
It is Mermaid syntax, an open standard for text-based diagrams that also works on GitHub, GitLab and Notion. The code you write here can be pasted in those places.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.