# Mermaid クラス図のチートシート

型と、そのメンバー、そして型どうしの関係。

## クラスを定義する

メンバーには可視性の印が付きます。+ が public、- が private です。

```mermaid
classDiagram
  class Animal {
    +String name
    +int age
    +isMammal() bool
  }
```

![Animal という名のクラス箱に name、age、isMammal メソッドの 3 つのメンバーが並ぶ。](/diagrams/class/definition.svg)

## 関係の種類

関係は 6 つ、それぞれ独自の矢印の先端を持ちます。左の 2 つは UML の定番です。

```mermaid
classDiagram
  Animal <|-- Duck
  Car *-- Wheel
  Team o-- Member
  User --> Order
  Order ..> Invoice
```

![5 つのクラス箱が矢印の先端の種類で結ばれています。継承は白抜きの三角、合成は塗られた菱形、凝集は白抜きの菱形、あとは普通の矢印と破線の矢印です。](/diagrams/class/relations.svg)

## 関係にラベルをつける

関係のあとのコロンは、2 つの型をつなぐ動詞です。

```mermaid
classDiagram
  Keeper "1" --> "*" Animal : feeds
  Animal "1" --> "0..*" Leg : has
```

![feeds というラベルの矢印で結ばれたクラス箱 2 つ。1 つ目の箱のそばに「1」、2 つ目の箱のそばに「多」とあります。](/diagrams/class/labels.svg)

## 基数

それぞれの端の引用符つきの数字が、その型がいくつ関わるかを示します。

```mermaid
classDiagram
  Customer "1" --> "*" Order : places
  Order "1" *-- "1..*" LineItem : contains
```

![クラス箱 3 つ。Customer から Order へ 1 と多、Order から LineItem へ 1 と 1 対多です。](/diagrams/class/cardinality.svg)

## 注釈

クラスの本体の中の山形括弧がその種類を示します。

```mermaid
classDiagram
  class Shape {
    <<interface>>
    +draw() void
  }
  Circle ..|> Shape
```

![Shape というクラス箱がインターフェースとして印され、draw メソッドを持ち、破線の三角で別のクラス箱につながっています。](/diagrams/class/annotation.svg)

## 方向

フローチャートと同じキーワードです。既定は上から下です。

```mermaid
classDiagram
  direction LR
  Animal <|-- Duck
  Animal <|-- Fish
```

![横並びの 2 つのクラス箱が、どちらも上の 3 つ目のクラス箱へ白抜きの三角でつながっています。](/diagrams/class/direction.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。