Class Diagram

Free Online UML Class Diagram Maker

Q: How do I show a generic or templated class?

Put the type parameter between tildes: `class Repository~T~`. Mermaid renders that as `Repository `, and the same syntax works on members, so `+findAll() List~User~` shows a method returning a typed collection. Angle brackets cannot be used directly because Mermaid reserves them for its own arrow syntax.

Q: How do I show inheritance vs interface implementation?

<|-- draws inheritance between classes; <|.. draws a dashed realization arrow for interface implementation.

Q: How do I mark member visibility?

Prefix members with + for public, - for private, and # for protected.

A class diagram is a type of UML diagram that models the structure of an object-oriented system: it shows classes, their attributes and methods, and the relationships between them, including inheritance, composition, and interface implementation.

Design object-oriented systems with UML class diagrams. Visualize classes, inheritance, and relationships as you type.

Last updated: 2026-09-06 · Mermaid v11

Try it live

Live · editablediagram.mmd

Example class diagram rendered by FlowViz

Edit the code — the diagram follows

When to use class diagram

OOP design

Model class hierarchies, interfaces, and relationships before writing code. Inheritance, composition, and aggregation each have their own arrow, so design conversations happen over precise notation instead of hand-waving.

Code documentation

Keep a visual map of your existing architecture next to the code it describes. Because the diagram is plain text, it diffs in review — refactors update the picture in the same commit.

System architecture

Communicate design patterns and component structure with visibility markers and typed relations. A class diagram of the core abstractions is the fastest orientation a codebase can offer a newcomer.

Key syntax

classDiagramDeclare diagram type

class Name { }Define a class

<<abstract>>Mark class as abstract

<<interface>>Mark as interface

+method() typePublic method

-field typePrivate field

#field typeProtected field

A <|-- BB inherits from A

A <|.. BB implements A

A *-- BComposition

A o-- BAggregation

Full Class Diagram syntax reference → More Mermaid examples →

How to create a class diagram with Mermaid

Open FlowViz and start with classDiagram.

Define a class: class ClassName {.

Add attributes inside: +String name or -int count.

Add methods: +methodName() returnType.

Use <<abstract>> or <<interface>> stereotypes on their own line inside the class.

Close the class with }.

Define relationships: ClassName1 <|-- ClassName2 for inheritance.

Add labels to relationships with : "description" at the end.

Frequently asked questions

How do I show a generic or templated class?

Put the type parameter between tildes: `class Repository~T~`. Mermaid renders that as `Repository<T>`, and the same syntax works on members, so `+findAll() List~User~` shows a method returning a typed collection. Angle brackets cannot be used directly because Mermaid reserves them for its own arrow syntax.

What is a class diagram used for?

Object-oriented design: classes, interfaces, inheritance, and composition — useful for planning code structure before writing it.

How do I show inheritance vs interface implementation?

<|-- draws inheritance between classes; <|.. draws a dashed realization arrow for interface implementation.

How do I mark member visibility?

Prefix members with + for public, - for private, and # for protected.

Start diagramming now

No signup. No install. Just open the editor and start writing.