Mermaid Class Diagrams

This page tests Mermaid class diagrams rendered via Kroki, with automatically generated natural language descriptions.

Strategy Pattern (Mermaid via Kroki)

The same Strategy Pattern example as PlantUML, but written in Mermaid syntax:

Mermaid source for "Strategy Pattern (Mermaid)"

classDiagram
    class Woordenlijst {
        -String[] woorden
        +sorteer() void
        +setSorteerStrategie(strategie) void
    }
    class SorteerStrategie {
        <<interface>>
        +sorteer(woorden) void
    }
    class MergeSort {
        +sorteer(woorden) void
    }
    class ShellSort {
        +sorteer(woorden) void
    }
    class QuickSort {
        +sorteer(woorden) void
    }
    Woordenlijst --> SorteerStrategie : huidigeStrategie
    SorteerStrategie <|.. MergeSort
    SorteerStrategie <|.. ShellSort
    SorteerStrategie <|.. QuickSort

Class diagram with 5 classes and 4 relations.

Classes:

• Class Woordenlijst with:
  • public method 'sorteer', without parameters, return type void
  • public method 'setSorteerStrategie', with parameter 'strategie', return type void
  • private attribute 'String[]' of type woorden
• Interface SorteerStrategie with:
  • public method 'sorteer', with parameter 'woorden', return type void
  • no attributes
• Class MergeSort with:
  • public method 'sorteer', with parameter 'woorden', return type void
  • no attributes
• Class ShellSort with:
  • public method 'sorteer', with parameter 'woorden', return type void
  • no attributes
• Class QuickSort with:
  • public method 'sorteer', with parameter 'woorden', return type void
  • no attributes

Relations:

• Woordenlijst has an association-relationship named 'huidigeStrategie' with SorteerStrategie
• MergeSort implements interface SorteerStrategie
• ShellSort implements interface SorteerStrategie
• QuickSort implements interface SorteerStrategie

Simple Animal Hierarchy

A simple inheritance example:

Mermaid source for "Animal Hierarchy"

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +bark() void
    }
    class Cat {
        +String color
        +meow() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

Class diagram with 3 classes and 2 relations.

Classes:

• Class Animal with:
  • public method 'makeSound', without parameters, return type void
  • public attribute 'String' of type name
  • public attribute 'int' of type age
• Class Dog with:
  • public method 'bark', without parameters, return type void
  • public attribute 'String' of type breed
• Class Cat with:
  • public method 'meow', without parameters, return type void
  • public attribute 'String' of type color

Relations:

• Dog extends Animal
• Cat extends Animal

E-commerce Domain Model

A more complex domain model:

Mermaid source for "E-commerce Domain"

classDiagram
    class Customer {
        -String id
        -String name
        -String email
        +placeOrder(items) Order
    }
    class Order {
        -String orderId
        -Date orderDate
        -OrderStatus status
        +calculateTotal() Money
        +ship() void
    }
    class OrderLine {
        -int quantity
        -Money unitPrice
        +getSubtotal() Money
    }
    class Product {
        -String sku
        -String name
        -Money price
        -int stockQuantity
    }
    Customer "1" --> "*" Order : places
    Order "1" --> "*" OrderLine : contains
    OrderLine "*" --> "1" Product : refers to

Class diagram with 4 classes and 3 relations.

Classes:

• Class Customer with:
  • public method 'placeOrder', with parameter 'items', return type Order
  • private attribute 'String' of type id
  • private attribute 'String' of type name
  • private attribute 'String' of type email
• Class Order with:
  • public method 'calculateTotal', without parameters, return type Money
  • public method 'ship', without parameters, return type void
  • private attribute 'String' of type orderId
  • private attribute 'Date' of type orderDate
  • private attribute 'OrderStatus' of type status
• Class OrderLine with:
  • public method 'getSubtotal', without parameters, return type Money
  • private attribute 'int' of type quantity
  • private attribute 'Money' of type unitPrice
• Class Product with:
  • private attribute 'String' of type sku
  • private attribute 'String' of type name
  • private attribute 'Money' of type price
  • private attribute 'int' of type stockQuantity
  • no methods

Relations:

• Customer has an association-relationship named 'places' with Order, multiplicity 1 to *
• Order has an association-relationship named 'contains' with OrderLine, multiplicity 1 to *
• OrderLine has an association-relationship named 'refers to' with Product, multiplicity * to 1

---

About Mermaid via Kroki

These diagrams are rendered server-side by Kroki. The remark-kroki-a11y plugin parses the Mermaid syntax and generates natural language descriptions.

For client-side Mermaid rendering (using @docusaurus/theme-mermaid), see Mermaid Theme Comparison.