Class Diagram Generator — type classes, get clean UML
Make a UML class diagram online by typing plain text. Declare classes with attributes and methods, connect them with inheritance, composition, and dependency arrows — the diagram renders live with a presentation-ready layout. Free, no signup, exports to SVG and PNG.
This is a quick preview. The full editor adds AI generate, save & share links, every theme, and watermark-free HD export.
Open full editor →What is a UML class diagram?
A class diagram shows the structure of a system: classes with their attributes and methods, and the relationships between them — inheritance, composition, aggregation, dependency — each with its own arrow notation and optional cardinality. It is the standard picture for object-oriented design, domain models, and API surface reviews.
Common use cases
Sketch the core entities and their relationships before writing code — a diagram argument is cheaper than a refactor.
A class diagram of the touched surface makes an architectural change reviewable without reading every file.
Textbook UML relationships — inheritance vs composition vs aggregation — with notation the reader can look up in the syntax table below.
Syntax quick reference
The essentials to get productive — paste any of these into the editor above and adapt. For the full grammar, see the class diagram syntax reference.
| Syntax | What it does |
|---|---|
class Order { +id: int } | Declare a class with attributes; + public, - private, # protected. |
+total(): Money | A method row — parentheses distinguish it from an attribute. |
A <|-- B | Inheritance — B extends A. |
A *-- B | Composition; o-- is aggregation. |
A ..> B : uses | Dashed dependency with a label. |
"1" --> "*" | Cardinality on either end of a relationship. |
<<interface>> | Stereotype annotation inside a class body. |
Export options
Vector output with fonts inlined — crisp at any zoom, right for docs, READMEs, and the web.
Raster with optional transparent background and up to 4× scale — right for slides and tickets.
One click publishes a share page with the beautified diagram — no file juggling for reviews.
Frequently asked questions
How do I make a UML class diagram online for free?
Type your classes as text in the editor above — a class block per type, then one line per relationship. The diagram renders live with a clean layout and exports to SVG or PNG without signup.
What is the difference between composition and aggregation arrows?
Composition (*--, filled diamond) means the part cannot outlive the whole — an OrderItem dies with its Order. Aggregation (o--, hollow diamond) is a looser has-a where the part exists independently. If deleting the container should delete the contents, use composition.
How do I show an interface or abstract class?
Add a stereotype line inside the class body: <<interface>> or <<abstract>>. The preloaded example marks PaymentMethod as an interface — edit it in place to see the annotation re-render.
What is the difference between a class diagram and an ER diagram?
A class diagram models code structure — methods, inheritance, interfaces. An ER diagram models stored data — tables, keys, cardinality. Domain models often start as class diagrams and land as ERDs; the editor renders both, and the ER diagram maker covers the data side.
Can I generate the diagram from AI output?
Yes. Ask any AI assistant for "a Mermaid classDiagram of …", paste the code here, and it renders with a beautified layout. A command-line tool and editor plugins let agents and scripts export diagrams directly.
Is this class diagram maker really free?
Yes. Anonymous use covers live preview, beautify, and SVG/PNG export with a small watermark; a free account removes the watermark. Per-month export quotas are listed on the pricing page.
Ready to make your own?
Open the full editor to save your work, switch themes, and export clean SVG or PNG. No signup.