Class diagrams (Диаграмма классов)

• Mermaid различает атрибуты и функции/методы в зависимости от того, присутствуют ли круглые скобки () или нет. Те записи, которые имеют круглые скобки (), рассматриваются как функции/методы, а другие - как атрибуты.
• Существует два способа определения участников класса, и независимо от того, какой синтаксис используется для их определения, выходные данные будут одинаковыми:

• Чтобы указать видимость члена класса (т.е. любого атрибута или метода), можно использовать обозначения, представленные ниже. Они могут быть помещены перед именем члена, но это необязательно.

+ -  общедоступный;

- - частный;

# - защищенный;

~ -  комплекс/внутренний.

• К связи можно добавить текст метки:

[classA][Arrow][ClassB]:LabelText

classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation

• Взаимосвязи могут быть изображены по разному:

classDiagram
    Animal <|--|> Zebra

• Используется следующий синтаксис:

[Relation Type][Link][Relation Type]

• Где тип взаимосвязи может быть одним из представленных ниже:

  Тип	Описание
  <|	Наследование
  *	Композиция
  o	Объединение (агрегация)
  >	Взаимосвязь (ассоциация)
  <	Взаимосвязь (ассоциация)
  |>	Реализация

• Также связь может быть одной из:

• Важность или множественность в диаграммах классов указывает на количество экземпляров одного класса, связанных с одним экземпляром другого класса. Например, в одной компании будет один или несколько сотрудников, но каждый сотрудник работает только в одной компании.
• Обозначения кратности помещаются рядом с концом ассоциаций.
• Различными вариантами важности являются:

1 - только 1
0..1 - 0 или 1
1..* - 1 или несколько
* - много
n - определенное количество (где n>1)
0..n - от нуля до n (где n>1)
1..n - от 1 до n (где n>1)

• Важность легко установить, поместив текст в кавычки перед(необязательно) и после (необязательно) заданной стрелки.

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

• Можно привязать событие к узлу, нажатие может привести либо к обратному вызову JavaScript, либо к ссылке, которая будет открыта в новой вкладке браузера.

• Вы можете определить эти действия в отдельной строке после установки всех классов.

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

• action is - это либо link (ссылка - связь), либо callback (обратный вызов),в зависимости от того, какой тип взаимодействий вы хотите вызвать;
• className - идентификатор узла, с которым будет связано действие;
• reference - либо URL-ссылка, либо имя функции для обратного вызова;
• optional - всплывающая подсказка - строка, которая отображается при наведении курсора мыши на элемент (примечание: стили всплывающей подсказки задаются классом .mermaidTooltip.).

• URL-ссылка:

classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"

• Обратный вызов:

classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"

• К отдельным узлам можно применить определенные стили, такие как: более толстая граница или другой цвет фона. Это делается путем предварительной установки классов в стилях css, которые могут быть применены из синтаксиса диаграммы, как в примере ниже:

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

• Затем прикрепите этот класс к определенному узлу, как показано в примере ниже:

cssClass "nodeId1" cssClass;

• Также можно присоединить класс к списку узлов в одном операторе:

cssClass "nodeId1,nodeId2" cssClass;

• Более короткая форма добавления класса заключается в присоединении имени класса к узлу с помощью оператора :::, как показано ниже:

classDiagram
    class Animal:::cssClass

или

classDiagram
    class Animal:::cssClass {
        -int sizeInFeet
        -canEat()
    }