Class Nodes

Basic Class

          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Basic Class

          flowchart TD
            Start --> Stop

Complex Class

                classDiagram
                class Square~Shape~{
                  int id
                  List~int~ position
                  setPoints(List~int~ points)
                  getPoints() List~int~
                }
          
          Square : -List~string~ messages
          Square : +setMessages(List~string~ messages)
          Square : +getMessages() List~string~
          Square : +getDistanceMatrix() List~List~int~~

No Attributes

          classDiagram
          class Duck {
            +swim()
            +quack()
          }

No Methods

          classDiagram
          class Duck {
            +String beakColor
          }

Only Class Name

Empty line as attribute

          classDiagram
          class Duck {
            
          }

Visibility and Types

(Further tilde testing)

classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~ -test()~~~~~~~ +deposit(amount) bool }

Additional Classifiers

(* Abstract | $ Static)

classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~ points)* getPoints()* List~int~ } Square : -List~string~ messages$ Square : +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square : +getDistanceMatrix() List~List~int~~$

Label

          classDiagram
          class Animal~test~["Animal with a label"]

Spacing

(Fix ensures consistent spacing rules)

(No space or single space?)

          classDiagram
          class ClassName {
          -attribute:type
          -            attribute : type
               test
          
          + GetAttribute() type                 
          +     GetAttribute() type
          }

Annotation

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

Long Class Name Text

          classDiagram
          class ThisIsATestForALongClassName {
            <<interface>>
            noOfLetters
            delete()
          }

Long Annotation Text

          classDiagram
          class Shape
          <<superlongannotationtext>> Shape
          Shape : noOfVertices
          Shape : draw()

Long Member Text

          classDiagram
          class Shape
          <<interface>> Shape
          Shape : noOfVertices
          Shape : longtexttestkeepgoingandgoing
          Shape : draw()

Link

          classDiagram
          class Shape
          link Shape "https://www.github.com" "This is a tooltip for a link"

Click

          classDiagram
          class Shape
          click Shape href "https://www.github.com" "This is a tooltip for a link"

Hand Drawn

          ---
          config:
            look: handDrawn
            htmlLabels: true
          ---
          classDiagram
          class Hand {
            +String beakColor
            +swim()
            +quack()
          }
          style Hand fill:#f9f,stroke:#29f,stroke-width:2px

Neutral Theme

          ---
          config:
            theme: neutral
          ---
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Dark Theme

          ---
          config:
            theme: dark
          ---
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Forest Theme

          ---
          config:
            theme: forest
          ---
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Base Theme

          ---
          config:
            theme: base
          ---
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Custom Theme

          %%{
            init: {
              'theme': 'base',
              'themeVariables': {
                'primaryColor': '#BB2528',
                'primaryTextColor': '#fff',
                'primaryBorderColor': '#7C0000',
                'lineColor': '#F8B229',
                'secondaryColor': '#006100',
                'tertiaryColor': '#fff'
              }
            }
          }%%
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }

Styling within Diagram

          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }
          style Duck fill:#f9f,stroke:#333,stroke-width:8px

Styling with classDef Statement

          classDiagram
          class Duck:::bold {
            +String beakColor
            +swim()
            +quack()
          }

          class Dog {
            +int numTeeth
            +bark()
          }

          cssClass "Duck,Dog" pink

          classDef pink fill:#f9f
          classDef bold stroke:#333,stroke-width:6px,color:#fff

Styling with Class in Stylesheet

          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }
          class Duck:::styleClass

Diagram Testing

Class Nodes Only

          ---
          title: Animal example
          ---
          classDiagram
              Animal : +int age
              Animal : +String gender
              Animal: +isMammal()
              Animal: +mate()
              class Duck{
                  +String beakColor
                  +swim()
                  +quack()
              }
              class Fish{
                  -int sizeInFeet
                  -canEat()
              }
              class Zebra{
                  +bool is_wild
                  +run()
              }

Class Nodes LR

          ---
          title: Animal example
          ---
          classDiagram
              direction LR
              Animal : +int age
              Animal : +String gender
              Animal: +isMammal()
              Animal: +mate()
              class Duck{
                  +String beakColor
                  +swim()
                  +quack()
              }
              class Fish{
                  -int sizeInFeet
                  -canEat()
              }
              class Zebra{
                  +bool is_wild
                  +run()
              }

Relations

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

Two Way Relation

          classDiagram
          class Animal {
            int size
            walk()
          }
          class Zebra {
            int size
            walk()
          }
            Animal o--|> Zebra

Relations with Labels

          classDiagram
            classA <|-- classB : implements
            classC *-- classD : composition
            classE o-- classF : aggregation

Cardinality / Multiplicity

          classDiagram
            Customer "1" --> "*" Ticket
            Student "1" --> "1..*" Course
            Galaxy --> "many" Star : Contains

Complex Relations with Theme

          ---
          config:
            theme: forest
            look: handDrawn
          ---
          classDiagram
            direction RL
            class Student {
              -idCard : IdCard
            }
            class IdCard{
              -id : int
              -name : string
            }
            class Bike{
              -id : int
              -name : string
            }
            Student "1" --o "1" IdCard : carries
            Student "1" --o "1" Bike : rides

Notes

          classDiagram
            note "This is a general note"
            note for MyClass "This is a note for a class"
            class MyClass

Namespaces

          classDiagram
            namespace BaseShapes {
                class Triangle
                class Rectangle {
                  double width
                  double height
                }
            }

Full Example

          ---
          title: Animal example
          ---
          classDiagram
              note "From Duck till Zebra"
              Animal <|--|> Duck
              note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
              Animal <|-- Fish
              Animal <|--|> Zebra
              Animal : +int age
              Animal : +String gender
              Animal: +isMammal()
              Animal: +mate()
              class Duck{
                  +String beakColor
                  +swim()
                  +quack()
              }
              class Fish{
                  -int sizeInFeet
                  -canEat()
              }
              class Zebra{
                  +bool is_wild
                  +run()
              }

Full Example

          ---
            config:
              theme: forest
              look: handDrawn
          ---
          classDiagram
          note for Outside "Note testing"
          namespace Test {
              class Outside
          }
          namespace BaseShapes {
              class Triangle
              class Rectangle {
                double width
                double height
              }
          }
          Outside <|--|> Rectangle
          style Triangle fill:#f9f,stroke:#333,stroke-width:4px