🧩 Mermaid

Class diagram

Model your domain and object structure

Open this example in the editor Generate one with AI

What is a Class diagram?

A class diagram describes the types in a system — their attributes, methods and relationships: inheritance, composition, association. It is the UML classic for domain modeling and code design.

Class diagrams do their best work in design reviews and onboarding, where a new joiner needs the shape of the domain before the code. They show what exists, what it owns and what it depends on — the coupling a folder tree hides. They say nothing about runtime: no call order, no lifecycle, no volumes. And one that is right today is wrong after the next refactor unless somebody maintains it. Shared types are redrawn in every diagram that needs them.

Live example

Mermaid code

classDiagram
    class Order {
      +String id
      +Date createdAt
      +total() Money
    }
    class Customer {
      +String name
      +String email
    }
    class OrderLine {
      +int quantity
    }
    Customer "1" --> "*" Order
    Order "1" *-- "*" OrderLine

Live example

When to use it

Model a domain before writing code (DDD, OOP design)

Document existing codebases for onboarding

Design database object mappings and API resource models

Common mistakes

Inheritance arrows point at the parent

Animal <|-- Dog means Dog extends Animal: the hollow triangle sits on the base class. Writing Dog <|-- Animal parses cleanly and silently inverts your hierarchy, which reviewers almost never catch. Read the triangle end first: it always names the parent.

Angle brackets swallow generics

A member written +List<Item> lines renders as +List lines, because the browser treats <Item> as an HTML tag. Mermaid uses tildes: +List~Item~ lines, and class Cart~Item~ for a generic class.

Missing parentheses turn methods into fields

+save is drawn in the attribute compartment and +save() in the method compartment. The parentheses alone decide that, not the return type. The diagram still renders, so the mistake survives review — add them even when the method takes no arguments.

Basic syntax

.mmd

classDiagram
    class Animal {
      +String name
      +makeSound() void
    }
    Animal <|-- Dog : inheritance

class Invoice { -String id +total(Money vat) Money }
Prefix members with + public, - private, # protected or ~ package. A type written after the parentheses is the return type; without parentheses the line is an attribute.
Customer "1" o-- "0..*" Invoice : owns
Cardinalities go in quotes on each side and the label after the colon names the relationship. Read it in the direction the line is written.
class Gateway { <<interface>> }
A stereotype in double angle brackets marks an interface, abstract class, enumeration or service. It renders in its own line above the class name.
namespace Billing { class Invoice }
A namespace groups classes into a labelled box, which keeps a large diagram readable and mirrors the package or module boundaries already used in the codebase.

Questions about this diagram

Which relationships does Mermaid support?

Inheritance (<|--), composition (*--), aggregation (o--), association (-->), dependency (..>) and realization (..|>), each with optional cardinalities and labels.

Can I generate a class diagram from code?

Paste your classes or describe your domain and the AI extracts entities, attributes and relationships into a clean class diagram.

Do class diagrams render in Notion or Confluence?

Notion renders Mermaid inside a code block. Confluence has no native support, so use a Marketplace macro or paste an exported SVG, which stays sharp at any zoom and can be replaced in place when the model changes.

Can I control where Mermaid places the classes?

Not directly. Layout is automatic; your only levers are direction LR or TB, grouping classes into namespaces, and reordering relationship declarations. For a fixed layout, export the SVG and adjust it in a vector editor.

Can I link a class to its source file?

Yes. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" turns the box into a link and adds a tooltip. The anchor lives inside the SVG, so it survives an SVG export and is lost the moment you export a PNG.

Can Mermaid show abstract or static members?

Yes. A trailing asterisk marks a member abstract and a trailing dollar sign marks it static — +area()* float, +unit()$ Shape. They render the way UML expects: italic for abstract, underlined for static. A whole class takes an <<abstract>> stereotype in its body.

Class diagram or another diagram type?

Class diagram or ER diagram?

Same boxes, different audience. An ER diagram describes tables, columns and keys as they exist in the database; a class diagram describes types, behaviour and inheritance as they exist in code. If the boxes have methods, it is a class diagram.

Class diagram or state diagram?

They model the same object from two angles. The class diagram says what an Order is — its fields, its relations, its methods. The state diagram says what an Order goes through: draft, paid, shipped, and the events between. Rich domains need both.

Explore other diagram types

🔀 Flowchart 💬 Sequence diagram 🗄️ Entity-relationship diagram 🔄 State diagram 📅 Gantt chart 🥧 Pie chart 🧠 Mind map 🌿 Git graph 🕰️ Timeline 🚶 User journey 🎯 Quadrant chart

Create your Class diagram now

Describe it in plain language — the AI writes the Mermaid code for you.

Open Mermaid Studio