HomeDiagramsClass diagram

Class diagram

Class diagrams document a type’s attributes, methods, and visibility in a compact, 3-compartment box — the standard UML notation for object-oriented design docs and API references. zombie-mermaid renders all four visibility markers and inheritance/composition relationships.

Source → render

A type's shape, one compartment at a time.

shape.mmd
classDiagram
  class Animal {
    +String name
    +int age
    +eat() void
    +sleep() void
  }
Output
Class diagram, Zombie Mermaid Animal + String name + int age + eat(): void + sleep(): void
About this notation

Where class diagrams come from, and how the syntax works.

Class diagrams are UML’s notation for a type’s shape — its attributes, its methods, and how it relates to every other type in the system — the standard reference for object-oriented design docs and for translating a design straight into code. Mermaid’s syntax marks each member’s visibility with `+` (public), `-` (private), `#` (protected), or `~` (package), and distinguishes relationships like inheritance, composition, aggregation, and plain association, each with its own arrowhead. Classes can carry stereotypes such as `<<Interface>>` or `<<Abstract>>` and be grouped into namespaces for larger diagrams.

Read the full syntax reference in the Mermaid docs →
Every example

Every Class diagram example, on its own page.

Class diagram, Zombie Mermaid Animal + String name + int age + eat(): void + sleep(): void
Class: Basic Class
Class diagram, Zombie Mermaid User + String name - String password # int internalId ~ String packageField + login(): bool - hashPassword(): String # validate(): void ~ notify(): void
Class: Visibility Markers
Class diagram, Zombie Mermaid <<interface>> Serializable + serialize(): String + deserialize(data): void
Class: Interface Annotation
Class diagram, Zombie Mermaid <<abstract>> Shape + String color + area(): double + draw(): void
Class: Abstract Annotation
Class diagram, Zombie Mermaid <<enumeration>> Status ACTIVE INACTIVE PENDING DELETED
Class: Enum Annotation
Class diagram, Zombie Mermaid Animal + String name + eat(): void Dog + String breed + bark(): void Cat + bool isIndoor + meow(): void
Class: Inheritance (<|--)
Show 23 more examples
Class diagram, Zombie Mermaid Car + String model + start(): void Engine + int horsepower + rev(): void
Class: Composition (*--)
Class diagram, Zombie Mermaid University + String name Department + String faculty
Class: Aggregation
Class diagram, Zombie Mermaid Customer + String name Order + int orderId
Class: Association (-->)
Class diagram, Zombie Mermaid Service + process(): void Repository + find(): Object
Class: Dependency (..>)
Class diagram, Zombie Mermaid <<interface>> Flyable + fly(): void Bird + fly(): void + sing(): void
Class: Realization (..|>)
Class diagram, Zombie Mermaid A B C D E F G H I J K L inheritance composition aggregation association dependency realization
Class: All 6 Relationship Types
Class diagram, Zombie Mermaid Teacher + String name Student + String name Course + String title teaches enrolled in
Class: Relationship Labels
Class diagram, Zombie Mermaid <<interface>> Subject + attach(Observer): void + detach(Observer): void + notify(): void <<interface>> Observer + update(): void EventEmitter - List<Observer> observers + attach(Observer): void + detach(Observer): void + notify(): void Logger + update(): void Alerter + update(): void
Class: Design Pattern — Observer
Class diagram, Zombie Mermaid Model - data Map + getData(): Map + setData(key, val): void + notify(): void View - model Model + render(): void + update(): void Controller - model Model - view View + handleInput(event): void + updateModel(data): void updates refreshes reads notifies
Class: MVC Architecture
Class diagram, Zombie Mermaid <<abstract>> Animal + String name + int age + eat(): void + sleep(): void Mammal + bool warmBlooded + nurse(): void Bird + bool canFly + layEggs(): void Dog + String breed + bark(): void Cat + bool isIndoor + purr(): void Parrot + String vocabulary + speak(): void
Class: Full Hierarchy
Class diagram, Zombie Mermaid Shapes Rendering Circle + radius + area() Square + side + area() Canvas + draw(shape)
Class: Namespaces
Class diagram, Zombie Mermaid Animal + int age + eat() Duck
Class: classDiagram-v2 Header
Class diagram, Zombie Mermaid Person Employee Order Customer places
Class: Bidirectional Relationships
Class diagram, Zombie Mermaid <<interface>> Comparable Version Comparable Printable
Class: Lollipop Interface
Class diagram, Zombie Mermaid Animal Class! + int age + String name + eat() Duck
Class: Backtick Class Names
Class diagram, Zombie Mermaid Base Shape Circle Canvas Renderer Plugin Canvas Renderer draws
Class: Mixed Newly Accepted Syntax
Class diagram, Zombie Mermaid Customer Order Item Tag places 1 * contains 1 1..* has 0..1 many
Class: Relationship Cardinalities
Class diagram, Zombie Mermaid Animal Dog Car Wheel Library Book Service Config Duck Swimmer Cart Item 1 0..* 1 4 holds 1 * reads 1 1..* * 1 1
Class: Cardinalities on Every Relationship Kind
Class diagram, Zombie Mermaid Teacher Course Lab Syllabus teaches 1 * 1 * coverstopics 1 1
Class: Cardinalities with Shared Ends
Class diagram, Zombie Mermaid Animal + String name + eat(): void Dog Cat Toy owns 1 *
Class: Direction LR
Class diagram, Zombie Mermaid <<abstract>> Shape + area(): double Circle Square Drawable Shape all sides equal
Class: Direction BT
Class diagram, Zombie Mermaid Domain Infra Order Item Repo contains 1 * stores
Class: Direction RL with Namespaces
Class diagram, Zombie Mermaid One Two A B C D
Class: Two Namespaces with Cross Edges