Class diagram demos

    ---
    title: Demo Class Diagram
    ---
    classDiagram
      accTitle: Demo Class Diagram
      accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.

      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()

      class Duck{
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
        -Listint sizeInFeet
        -canEat()
      }
      class Zebra{
        +bool is_wild
        +run(List~T~, List~OT~)
        %% +run-composite(List~T, K~)
        +run-nested(List~List~OT~~)
      }

    

    classDiagram
    Class01 <|-- AveryLongClass : Cool

    <<interface>> Class01
    Class03 "0" *-- "0..n" Class04
    Class05 "1" o-- "many" Class06
    Class07 .. Class08
    Class09 "many" --> "1" C2 : Where am i?
    Class09 "0" --* "1..n" C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : #size()
    Class01 : -int chimp
    Class01 : +int gorilla
    Class08 <--> C2: Cool label
      class Class10 {
      <<service>>
      int id
      size()
      }
    

    classDiagram
    class Class01~T~
    Class01 : #size()
    Class01 : -int chimp
    Class01 : +int gorilla
    Class01 : +abstractAttribute string*
    class Class10~T~ {
    <<service>>
    int id
    size()
    }
    

    classDiagram
    Class01~T~ <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class03~T~ "0" *-- "0..n" Class04
    Class05 "1" o-- "many" Class06
    Class07~T~ .. Class08
    Class09 "many" --> "1" C2 : Where am i?
      Class09 "0" --* "1..n" C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : #size()
      Class01 : -int chimp
      Class01 : +int gorilla
      Class08 <--> C2: Cool label
        class Class10 {
        <<service>>
        int id
        size()
        }
    

    classDiagram
    Interface1 ()-- Interface1Impl
    

    classDiagram
    direction LR
    Animal ()-- Dog
    Animal ()-- Cat
    note for Cat "should have no members area"
    Dog : bark()
    Dog : species()
    

    classDiagram
    direction RL
    Fruit ()-- Apple
    Apple : color()
    Apple : -int leafCount()
    Fruit ()-- Pineapple
    Pineapple : color()
    Pineapple : -int leafCount()
    Pineapple : -int spikeCount()
    

    classDiagram
      class Person {
        +ID : Guid
        +FirstName : string
        +LastName : string
        -privateProperty : string
        #ProtectedProperty : string
        ~InternalProperty : string
        ~AnotherInternalProperty : List~List~string~~
      }
      class People List~List~Person~~
    

    classDiagram
      namespace Company.Project.Module {
        class GenericClass~T~ {
          +addItem(item: T)
          +getItem() T
        }
      }
    

    classDiagram
      namespace Company.Project.Module.SubModule {
        class Report {
          +generatePDF(data: List)
          +generateCSV(data: List)
        }
      }
      namespace Company.Project.Module {
        class Admin {
          +generateReport()
        }
      }
      Admin --> Report : generates
    

    classDiagram
      namespace Company.Project.Module {
        class User {
          +login(username: String, password: String)
          +logout()
        }
        class Admin {
          +addUser(user: User)
          +removeUser(user: User)
          +generateReport()
        }
        class Report {
          +generatePDF(reportData: List)
          +generateCSV(reportData: List)
        }
      }
      Admin --> User : manages
      Admin --> Report : generates
    

    classDiagram
      namespace Shapes {
        class Shape {
          +calculateArea() double
        }
        class Circle {
          +double radius
        }
        class Square {
          +double side
        }
      }

      Shape <|-- Circle
      Shape <|-- Square

      namespace Vehicles {
        class Vehicle {
          +String brand
        }
        class Car {
          +int horsepower
        }
        class Bike {
          +boolean hasGears
        }
      }

      Vehicle <|-- Car
      Vehicle <|-- Bike
      Car --> Circle : "Logo Shape"
      Bike --> Square : "Logo Shape"

    

      classDiagram
        note "This is a outer note"
        note for Class1 "This is a outer note for Class1"
        namespace ns {
          note "This is a inner note"
          note for Class1 "This is a inner note for Class1"
          class Class1
          class Class2
        }
    

Nested Namespaces (dot notation)

    classDiagram
      namespace Company.Engineering.Backend {
        class Developer {
          +writeCode()
          +reviewPR()
        }
      }
      namespace Company.Engineering.Frontend {
        class Designer {
          +createMockup()
          +buildUI()
        }
      }
      namespace Company.Engineering {
        class TechLead {
          +planSprint()
        }
      }
      namespace Company {
        class CEO {
          +makeDecisions()
        }
      }
      CEO --> TechLead : oversees
      TechLead --> Developer : leads
      TechLead --> Designer : leads
    

Nested Namespaces (syntactic nesting)

    classDiagram
      namespace Platform {
        namespace Auth {
          class UserService {
            +login()
            +logout()
          }
          class TokenManager {
            +generateToken()
            +validateToken()
          }
        }
        namespace Data {
          class Repository {
            +find()
            +save()
          }
        }
        class Gateway {
          +route()
        }
      }
      UserService --> TokenManager : uses
      Gateway --> UserService : delegates
      Gateway --> Repository : delegates
    

Mixed: dot notation + syntactic nesting

    classDiagram
      namespace App.Services {
        namespace Billing {
          class Invoice {
            +calculate()
          }
        }
        class Logger {
          +log()
        }
      }
      namespace App.Models {
        class User {
          +String name
        }
      }
      Invoice --> Logger : logs to
      Invoice --> User : bills
    

Compact mode (hierarchicalNamespaces: false)

Same source as the dot-notation demo above, rendered with hierarchicalNamespaces: false. Only the three user-declared namespaces are emitted as flat boxes using their full qualified name; intermediate ancestors (e.g. Company.Engineering would only appear if declared) are skipped.

    ---
    config:
      class:
        hierarchicalNamespaces: false
    ---
    classDiagram
      namespace Company.Engineering.Backend {
        class Developer {
          +writeCode()
          +reviewPR()
        }
      }
      namespace Company.Engineering.Frontend {
        class Designer {
          +createMockup()
          +buildUI()
        }
      }
      namespace Company {
        class CEO {
          +makeDecisions()
        }
      }
      CEO --> Developer : oversees
      CEO --> Designer : oversees
    

Compact mode with syntactic nesting

Syntactic nesting in compact mode: nested namespace blocks still produce fully-qualified names, but only the explicit leaf namespaces render as flat boxes.

    ---
    config:
      class:
        hierarchicalNamespaces: false
    ---
    classDiagram
      namespace Platform {
        namespace Auth {
          class UserService {
            +login()
          }
        }
        namespace Data {
          class Repository {
            +find()
          }
        }
      }
      UserService --> Repository : reads
    

Namespace labels

    classDiagram
      namespace Auth["Authentication Service"] {
        class UserService {
          +login()
          +logout()
        }
        class TokenManager {
          +generate()
        }
      }
      namespace Store["Data Store"] {
        class Repository {
          +find()
          +save()
        }
      }
      UserService --> TokenManager : uses
      UserService --> Repository : reads from