Class Diagram

class Ship Class Hierarchy

Vessel [interface]
  + sail(): void
  + anchor(): void

Ship implements Vessel [abstract]
  # name: string
  # crew: number
  + getName(): string

Galleon extends Ship
  - cannons: number
  + fire(): void

Sloop extends Ship
  - speed: number
  + flee(): void

ShipType [enum]
  Galleon
  Sloop
  Frigate

Ship -> ShipType : has type

Overview

Class diagrams render UML-style boxes with three compartments per the UML spec: name, attributes, and methods. Classes connect via relationships like inheritance, composition, and association. Layout is automatic via Dagre.

Syntax

class Diagram Title

ClassName [modifier] (color)
  + publicField: type
  - privateField: type
  # protectedField: type
  + method(params): returnType

ChildClass extends ParentClass
  + field: type

Settings

Key	Description	Default
`chart`	Must be `class`	—
`title`	Diagram title	None

Classes

Declare a class on an unindented line. Members are indented below:

User
  + name: string
  + email: string
  + login(password: string): boolean

Modifiers

Add a modifier in brackets to change the class type:

Modifier	Syntax	Appearance
Interface	`Name [interface]`	`«interface»` badge, blue
Abstract	`Name [abstract]`	`«abstract»` badge, italic name, purple
Enum	`Name [enum]`	`«enum»` badge, yellow

Enum Values

Enum classes list plain values instead of typed fields:

OrderStatus [enum]
  Pending
  Confirmed
  Shipped
  Delivered

Fields and Methods

Indented lines under a class are parsed as members.

Visibility

Symbol	Meaning
`+`	Public
`-`	Private
`#`	Protected
(none)	Public

Fields

  + name: string
  - password: string
  # id: number

Methods

Methods are detected by the presence of parentheses:

  + login(email: string, pass: string): boolean
  - validate(): void
  + getInstance(): Logger {static}

Add {static} at the end to mark a member as static.

Relationships

Inheritance & Implementation

Use extends or implements in the class declaration header:

Dog extends Animal
  + breed: string

Circle implements Drawable
  - radius: number

This declares the class and establishes the relationship in one line. Members are indented below as usual.

Arrow Syntax

For other relationships, use arrow notation:

Relationship	Arrow	Example
Inheritance	`--\|>`	`Dog --\|> Animal`
Implementation	`..\|>`	`Dog ..\|> Serializable`
Composition	`*--`	`Car *-- Engine`
Aggregation	`o--`	`Team o-- Player`
Dependency	`..>`	`Service ..> Logger`
Association	`->`	`Order -> Customer`

Labels

Add a label after a colon:

Car *-- Engine : powered by
Service ..> Logger : uses

Colors

Colors are auto-assigned by modifier type. Override with a color name in parentheses:

Ship (red)
Engine [abstract] (purple)

Comments

// This line is ignored by the parser

Complete Example

class Design Patterns

Drawable [interface]
  + draw(): void
  + resize(w: number, h: number): void

Shape implements Drawable [abstract] (purple)
  # x: number
  # y: number
  + area(): number

Circle extends Shape
  - radius: number
  + getRadius(): number

Rectangle extends Shape
  - width: number
  - height: number

Canvas
  - shapes: Shape[]
  + render(): void

Canvas *-- Shape : contains
Canvas ..> Logger : uses