Class Nodes

Basic Class

          ---
            config:
              htmlLabels: false
          ---
          classDiagram
          class _Duck_ {
            +String beakColor
            _+_swim_()a_
            __+quack() test__
          }
        

Basic Class

          ---
          config:
            htmlLabels: false
          ---
          classDiagram
          class Class10:::exClass2 {
            int[] id
            List~int~ ids
            test(List~int~ ids) List~bool~
            testArray() bool[]
          }
        

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

          ---
            config:
              class:
                hideEmptyMembersBox: false
          ---
          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': '#F83d29',
                'secondaryColor': '#006100',
                'tertiaryColor': '#fff'
              }
            }
          }%%
          classDiagram
          class Duck {
            +String beakColor
            +swim()
            +quack()
          }
          Duck--Dog
        

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 default color:#f1e
          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: handDrawns
            layout: elk
          ---
          classDiagram
            direction RL
            class Student {
              -idCard : IdCard
            }
            class IdCard{
              -id : int
              -name : string
            }
            class Bike{
              -id : int
              -name : string
            }
            Student "1" o--o "1" IdCard : carries
            Student "1" o--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
                }
            }
        

Namespaces

          ---
            config:
              layout: elk
          ---
          classDiagram
          namespace Namespace1 {
            class C1
            class C2
          }
          C1 --> C2
          class C3
          class C4
        

Full Example

          ---
          title: Animal example
          config:
            layout: dagre
          ---
          classDiagram
              note "From Duck till Zebra"
              Animal <|--|> Duck
              note for Duck "can fly
can swim
can dive
can 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() } cssClass "Duck" test classDef test fill:#f71 %%classDef default fill:#f93

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
        
          ---
            config:
              look: handDrawn
              layout: elk
          ---
          classDiagram
            Class01 "1" <|--|> "*" AveryLongClass : Cool
            <<interface>> Class01
            Class03 "1" *-- "*" Class04
            Class05 "1" o-- "many" Class06
            Class07 "1" .. "*" Class08
            Class09 "1" --> "*" C2 : Where am i?
            Class09 "*" --* "*" C3
            Class09 "1" --|> "1" Class07
            NewClass ()--() Class04
            Class09 <|--|> AveryLongClass
            Class07  : equals()
            Class07  : Object[] elementData
            Class01  : size()
            Class01  : int chimp
            Class01  : int gorilla
            Class08 "1" <--> "*" C2: Cool label
            class Class10 {
              <<service>>
              int id
              test()
            }
            Class10 o--o AveryLongClass
            Class10 <--> Class07
        
          classDiagram
            test ()--() test2