Skip to content
SayDiagramSayDiagram

Learn

Class diagram syntax

Learn class blocks, visibility, relationships, and stereotypes used in the Editor modules template.

On this page9 sections
  1. Syntax cheatsheet
  2. 1.Start a class diagram
  3. 2.Fields and methods
  4. 3.Visibility markers
  5. 4.Relationships between classes
  6. 5.Stereotypes and annotations
  7. 6.Cardinality on associations
  8. 7.Put it together: Editor modules
  9. Check your level

Syntax cheatsheet

Quick reference for this diagram type

ConceptSyntax
DeclareclassDiagram
Class bodyclass Name { … }
Visibility+ public · - private · # protected · ~ package
AssociationEditor --> Preview
InheritanceChild <|-- Parent
Composition / aggregation*-- · o--
Stereotype<<interface>>
  1. 1

    Start a class diagram

    Begin with classDiagram. Define classes first, then connect them with relationship arrows.

    Class names are identifiers — keep them aligned with real module names when documenting code.

    classDiagram
  class Editor
  class Preview
  Editor --> Preview
    Expand
  2. 2

    Fields and methods

    List members inside the class body. Fields are names (optionally typed); methods end with ().

    Order fields above methods so the box reads like a quick API card.

    classDiagram
  class Editor {
    +content
    +save()
  }
  class Preview {
    +render()
  }
    Expand
  3. 3

    Visibility markers

    Prefix members with + public, - private, # protected, or ~ package/internal.

    In product diagrams, + is often enough; use - when you want to hide implementation details.

    classDiagram
  class Arrange {
    +layout
    -cache
    +exportPng()
  }
    Expand
  4. 4

    Relationships between classes

    --> is a directed association (“uses”). <|-- is inheritance. *-- composition and o-- aggregation show ownership strength.

    Label relationships when the verb isn’t obvious: Editor --> Preview : renders.

    classDiagram
  Editor --> Preview : renders
  Editor --> Arrange : arranges
  Shape <|-- Rectangle
  Document *-- Page
    Expand
  5. 5

    Stereotypes and annotations

    Stereotypes like <<interface>> or <<service>> clarify the role of a class without extra nodes.

    Place the stereotype in the class declaration or as a line in the body, depending on style.

    • Tip: Dashed realization (<|..) often marks interface implementation.
    classDiagram
  class Renderer {
    <<interface>>
    +render()
  }
  class MermaidPreview {
    +render()
  }
  Renderer <|.. MermaidPreview
    Expand
  6. 6

    Cardinality on associations

    You can attach multiplicity on either end of an association when it helps ("1", "0..*").

    Skip multiplicity when every relationship is obviously one-to-one — noise helps no one.

    classDiagram
  Editor "1" --> "*" Preview : may open
    Expand
  7. 7

    Put it together: Editor modules

    Combine class bodies and associations to show how Editor drives Preview and Arrange in the examples template.

    classDiagram
  class Editor {
    +content
    +save()
  }
  class Preview {
    +render()
  }
  class Arrange {
    +layout
    +exportPng()
  }
  Editor --> Preview
  Editor --> Arrange
    Expand

Check your level

80% or higher certifies this lesson. You'll get 3–5 random questions from a larger bank.

Back to examples