Free Online Class Diagram Generator
A class diagram documents the shape of an object model: what fields and methods a class exposes, and how classes relate through inheritance, composition, or a plain reference. It's the standard UML diagram for explaining a codebase's structure without reading every file.
Written as text, a class diagram can be regenerated whenever the model changes instead of going stale in a wiki page nobody remembers to update.
An inheritance hierarchy for shapes
Mermaid source
classDiagram
class Shape {
<<abstract>>
+area() double
+perimeter() double
}
class Circle {
-double radius
+area() double
}
class Rectangle {
-double width
-double height
+area() double
}
Shape <|-- Circle
Shape <|-- Rectangle<<abstract>> marks Shape as an abstract base class. <|-- is the inheritance arrow, drawn from the child back to the parent it extends. + and - before a member mark it public or private.
Composition and association in an order system
Mermaid source
classDiagram
class Order {
-string id
-Date placedAt
+addItem(item) void
+total() double
}
class LineItem {
-int quantity
-double price
}
class Customer {
-string name
-string email
}
Order "1" *-- "many" LineItem : contains
Customer "1" --> "many" Order : places*-- is composition: a LineItem cannot exist without its Order, so deleting the order deletes its items. --> is a plain association — a Customer references its Orders without owning their lifecycle. The quoted labels on each side set the cardinality.
Questions
What do +, -, and # mean before a class member?
They set visibility: + is public, - is private, and # is protected, matching the UML convention. Mermaid renders them literally in front of the field or method name, so they're documentation rather than enforced access control.
What's the difference between <|-- and *--?
<|-- is inheritance — the class at the open-arrow end extends the class at the triangle end. *-- is composition — the class at the diamond end owns instances of the other class and controls their lifetime. Use --> for a looser association where neither is true.
How do I mark a class as abstract or an interface?
Add <<abstract>> or <<interface>> as the first line inside the class body, for example class Shape { <<abstract>> ... }. Mermaid renders the label above the class name to flag it.