Mermaid Class Diagram Maker
Write class diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
Class diagram example
Rendering preview…
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+fetch() void
}
class Cat {
+purr() void
}
Animal <|-- Dog
Animal <|-- CatWhat is a class diagram?
A class diagram is a UML diagram that shows the classes in a system, their attributes and methods, and the relationships between them, such as inheritance and composition. In Mermaid a class diagram starts with the classDiagram keyword.
When to use a class diagram
- Designing a domain model before writing code
- Documenting an existing codebase for new teammates
- Showing inheritance and interface hierarchies
- Planning a refactor
How to make a class diagram in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with classDiagram on the first line.
- Step 2
Define the classes
Write class Order and list its members inside curly braces. Prefix each member with + for public, - for private, # for protected or ~ for package.
- Step 3
Add relationships
Connect classes with arrows such as Animal <|-- Dog for inheritance, Order *-- LineItem for composition, or Customer --> Order for an association.
- Step 4
Export or share
Check the live preview, then export the diagram as PNG or SVG or copy a share link.
Class diagram syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Attribute | +String name | Public field with a type |
| Method | +total() float | Method with a return type |
| Inheritance | Parent <|-- Child | Child extends parent |
| Composition | Whole *-- Part | Part cannot exist alone |
| Aggregation | Group o-- Member | Part can exist alone |
| Association | A --> B | One class uses another |
| Dependency | A ..> B | Weaker, temporary use |
| Realization | Shape <|.. Circle | Class implements interface |
| Cardinality | A "1" --> "*" B | How many on each side |
| Annotation | <<interface>> Shape | Stereotype label |
Class diagram FAQ
Does Mermaid class diagram syntax follow UML?
It follows UML class diagram notation for the common cases: visibility markers, attributes, methods with return types, annotations such as <<interface>>, and the standard relationship arrows. It is meant for documentation rather than code generation.
How do I show that a class implements an interface?
Mark the interface with the <<interface>> annotation and connect it with a realization arrow, for example Shape <|.. Circle. The dotted line with a hollow triangle points at the interface.