Class Diagram

A class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects. Wikipedia

A simple demo

classDiagram
  title: Class Diagram Example
  class Fruit {
    <<interface>>
    float sweetness
    -float age

    float getAge()
  }

  class Apple {
    float softness
    {static} Apple fromString(str)
  }

  %% There are so many kind of fruits
  Fruit <|-- Apple
  Fruit <|-- Kiwi
  Fruit <|-- Banana

  Fruit "many" --* "1" Bag: packed into

Define a class

Class members

To declare fields and methods, you can use the symbol : followed by the field's or method's name.

It is also possible to group between brackets {} all fields and methods.

You can write type and name in any order you prefer.

classDiagram
  class Fruit {
    float sweetness

    squeeze()
  }

  Fruit : getAge(): float

Member visibility

Define member visibility with these symbols. The notaiton is optional but it should be placed before the member.

• + public
• # protected
• - private
• ~ package/internal

Class annotations

You can annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:

• <<interface>> To represent an interface class
• <<enumeration>> To represent an enum

Annotations are defined within the opening << and closing >>. There are two ways to add an annotation to a class:

classDiagram
  class Shape
  <<interface>> Shape
  Shape : vertices
  Shape : draw()

  class Color {
    <<enumeration>>
    Red
    Green
    Blue
  }

Relations between classes

You can define relations between classes using following symbols :

Type	Description
<|--	Inheritance
*--	Composition
o--	Aggregation
-->	Association
--	Link

It is possible to replace -- by .. to have a dotted line.

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

Label on relations

You can add a label on the relation, using :, followed by the text of the label.

Also, you can use double-quotes "" on each side of the relation for cardinality.

classDiagram
  classA "1" *-- "many" classB : contains
  classC o-- classD : aggregation
  classE --> "1" classF

Override config

You can override diagarm config through @param directive.

All available configs can be seen in the Config page.

classDiagram
  @param entityBackground #61afef

  class Animal {
  }

  class Dog {
    void bark()
  }

  Animal <|-- Dog