← Back to index

classchart

Example 1

SebastianJS (SVG)
../assets/classchart-1.svg
Mermaid (code)
---
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~~)
  }

Example 2

SebastianJS (SVG)
../assets/classchart-2.svg
Mermaid (code)
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()
  }

Example 3

SebastianJS (SVG)
../assets/classchart-3.svg
Mermaid (code)
classDiagram
class Class01~T~
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class01 : +abstractAttribute string*
class Class10~T~ {
<<service>>
int id
size()
}

Example 4

SebastianJS (SVG)
../assets/classchart-4.svg
Mermaid (code)
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()
    }

Example 5

SebastianJS (SVG)
../assets/classchart-5.svg
Mermaid (code)
classDiagram
Interface1 ()-- Interface1Impl

Example 6

SebastianJS (SVG)
../assets/classchart-6.svg
Mermaid (code)
classDiagram
direction LR
Animal ()-- Dog
Animal ()-- Cat
note for Cat "should have no members area"
Dog : bark()
Dog : species()

Example 7

SebastianJS (SVG)
../assets/classchart-7.svg
Mermaid (code)
classDiagram
direction RL
Fruit ()-- Apple
Apple : color()
Apple : -int leafCount()
Fruit ()-- Pineapple
Pineapple : color()
Pineapple : -int leafCount()
Pineapple : -int spikeCount()

Example 8

SebastianJS (SVG)
Render failed: Parse error on line 11:
...ss People List~List~Person~~
-----------------------^
Expecting 'NEWLINE', 'EOF', 'SQS', 'STR', 'LABEL', 'STRUCT_START', 'STRUCT_STOP', 'STYLE_SEPARATOR', 'AGGREGATION', 'EXTENSION', 'COMPOSITION', 'DEPENDENCY', 'LOLLIPOP', 'LINE', 'DOTTED_LINE', 'CALLBACK_NAME', 'HREF', got 'ALPHA'
Mermaid (code)
classDiagram
class Person {
  +ID : Guid
  +FirstName : string
  +LastName : string
  -privateProperty : string
  #ProtectedProperty : string
  ~InternalProperty : string
  ~AnotherInternalProperty : List~List~string~~
}
class People List~List~Person~~

Example 9

SebastianJS (SVG)
../assets/classchart-9.svg
Mermaid (code)
classDiagram
namespace Company.Project.Module {
  class GenericClass~T~ {
    +addItem(item: T)
    +getItem() T
  }
}

Example 10

SebastianJS (SVG)
../assets/classchart-10.svg
Mermaid (code)
classDiagram
namespace Company.Project.Module.SubModule {
  class Report {
    +generatePDF(data: List)
    +generateCSV(data: List)
  }
}
namespace Company.Project.Module {
  class Admin {
    +generateReport()
  }
}
Admin --> Report : generates

Example 11

SebastianJS (SVG)
../assets/classchart-11.svg
Mermaid (code)
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

Example 12

SebastianJS (SVG)
../assets/classchart-12.svg
Mermaid (code)
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"