KymoStudio

    Class Diagram

    Class Diagram

    A class diagram describes the structure of a system: its classes, their attributes and operations, and the relationships between them — the central diagram of object-oriented modelling. kymo's editor reads the Mermaid classDiagram syntax.

    This page works like a quickstart: as you scroll, the pane on the right shows the source and the preview for the section you're reading. Copy grabs the source; ▶ Open in editor loads it into editor.kymo.studio (pick mermaid in the diagram-type dropdown when starting from scratch).

    The example on the right is the classic Animal hierarchy: a base class with attributes and methods, and three subclasses connected with inheritance arrows.

    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal : +isMammal()
    Animal : +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

    ▶ Try it in the editor

    Rendered animal.mmd

    Classes and members

    Declare a class with the class keyword, then add members one of two ways — colon statements (Animal : +int age) or a curly-brace block, as the BankAccount example shows. Both forms mix freely.

    A trailing word after a method's parentheses is its return type (+deposit(amount) bool). Generic types are written with tildes: List~int~; a tilde suffix on the class name itself (class Square~Shape~) declares a generic class.

    Members are classified automatically: anything with parentheses renders in the method compartment, everything else is an attribute.

    classDiagram
    class BankAccount{
        +String owner
        +BigDecimal balance
        +deposit(amount) bool
        +withdrawal(amount) int
    }
    class Square~Shape~{
        int id
        List~int~ position
        setPoints(List~int~ points)
        getPoints() List~int~
    }

    ▶ Try it in the editor

    Rendered members.mmd

    Visibility

    An optional marker before a member name sets its visibility:

    MarkerMeaning
    +public
    -private
    #protected
    ~package / internal

    Two more go after a method's parentheses: $ marks it static and * marks it abstract. On an attribute, a trailing $ means static.

    classDiagram
    class Account{
        +String publicField
        -String privateField
        #String protectedField
        ~String packageField
        +staticMethod()$
        +abstractMethod()*
    }

    ▶ Try it in the editor

    Rendered visibility.mmd

    Relationships

    A relationship is two classes joined by an arrow operator, with an optional : label describing it:

    SyntaxUML relation
    A <|-- Binheritance
    A *-- Bcomposition
    A o-- Baggregation
    A <-- Bassociation
    A -- Blink (solid)
    A <.. Bdependency
    A <|.. Brealization
    A .. Blink (dashed)

    Arrowheads may sit on either end (A --|> B is inheritance read the other way), and two-way relations (A <--> B) are supported.

    classDiagram
    classA <|-- classB : inheritance
    classC *-- classD : composition
    classE o-- classF : aggregation
    classG <-- classH : association
    classI -- classJ : link
    classK <.. classL : dependency
    classM <|.. classN : realization
    classO .. classP : dashed link

    ▶ Try it in the editor

    Rendered relations.mmd

    Cardinality

    Quote a multiplicity on either end of the arrow, right next to the class it describes: Customer "1" --> "*" Ticket. Common values are 1, 0..1, 1..*, *, n, and many.

    classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : contains

    ▶ Try it in the editor

    Rendered cardinality.mmd

    Annotations

    A <<stereotype>> line as the first entry of a class body marks its kind — <<interface>>, <<abstract>>, <<Service>>, <<enumeration>> — and renders above the class name.

    classDiagram
    class Shape{
        <<interface>>
        noOfVertices
        draw()
    }
    class Color{
        <<enumeration>>
        RED
        BLUE
        GREEN
    }

    ▶ Try it in the editor

    Rendered annotations.mmd

    Notes

    note "text" attaches a free-floating note to the diagram; note for ClassName "text" pins it to a class. A <br/> inside the quoted text breaks lines.

    classDiagram
    note "This is a general note"
    note for Duck "can fly<br/>can swim<br/>can help in debugging"
    class Duck{
        +quack()
    }

    ▶ Try it in the editor

    Rendered notes.mmd

    Direction

    direction sets the flow of the layout: TB (default), BT, LR, or RL.

    classDiagram
    direction LR
    class Order
    class Customer
    Customer "1" --> "*" Order : places

    ▶ Try it in the editor

    Rendered direction.mmd

    Status. Class diagram previews on this page and in the editor use the Mermaid renderer; importing class diagrams into kymo's own pipeline (UML export like sequence diagrams, native SVG/PNG/PDF rendering) is on the roadmap.

    See also