Class diagrams

							classDiagram
  class Editor {
    +source string
    +setSource(code)
    +getState()
  }
  class Diagram {
    +render() SVG
  }
  Editor --> Diagram : builds
						

classDiagram
  class Editor {
    +source string
    +setSource(code)
    +getState()
  }
  class Diagram {
    +render() SVG
  }
  Editor --> Diagram : builds

A class diagram maps types and how they connect. Use it for a design sketch, not a full code dump.

Declare classes

classDiagram
  class User {
    +id string
    +email string
    +login()
  }

Lines inside the class block are fields or methods. A leading + means public. - means private. # means protected.

You can also write a class with only a name: class Session.

Show relationships

Common links:

Link	Meaning
`A <	– B`
A *-- B	A owns B (composition)
A o-- B	A has B (aggregation)
A --> B	A uses or points to B
A ..> B	A depends on B

Add a short label after the link:

classDiagram
  Editor --> Diagram : builds

Keep the model small

Good class diagrams answer one question, such as “who owns the render step?”

• Prefer five to eight classes on one page.
• Hide getters and setters that add no meaning.
• Drop framework noise (BaseEntity, Serializable) unless the reader needs it.

Writing tips

• Use the same names as your code when you can.
• Prefer verb method names: render(), save(), reset().
• If two classes share only a soft link, use --> instead of ownership (*--).