How do I make a UML class diagram online for free?

Start with classDiagram, then define classes using class Name { attributes and methods }. Connect related classes with arrows like --> or --|>, and the diagram renders instantly.

What do the different arrows mean?

--> is a simple association, --|> is inheritance (extends), *-- is composition, and o-- is aggregation. Mermaid supports these standard UML relationship notations.

How do I show visibility for attributes and methods?

Prefix members with + for public, - for private, or # for protected, e.g. +String name or -calculateTotal().

Class diagram tool

Model classes, attributes, methods and relationships by writing simple text. Diagram.RS renders an interactive UML class diagram live using Mermaid syntax – useful for software design and documentation.

Diagram code

Preview

Theme

Default

Try an example

How to make a class diagram online

Start with classDiagram and define each class with class ClassName { ... }.
List attributes and methods inside the braces, prefixed with +, -, or # for visibility.
Connect classes with relationship arrows such as -->, --|>, or *--, and label them.
Export the diagram as SVG or PNG for your design docs.

Class diagram FAQ

How do I make a UML class diagram online for free?: Start with classDiagram, then define classes using class Name { attributes and methods }. Connect related classes with arrows like --> or --|>, and the diagram renders instantly.
What do the different arrows mean?: --> is a simple association, --|> is inheritance (extends), *-- is composition, and o-- is aggregation. Mermaid supports these standard UML relationship notations.
How do I show visibility for attributes and methods?: Prefix members with + for public, - for private, or # for protected, e.g. +String name or -calculateTotal().

More diagram tools

Diagram maker home ER diagram tool Flowchart maker Mindmap maker Mermaid live editor