# Mermaid 类图速查表

类型、它们的成员，以及它们之间的关系。

## 定义一个类

成员前面加可见性标记：+ 公有，- 私有。

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

![一个叫 Animal 的类框，列着三个成员：name、age 和一个 isMammal 方法。](/diagrams/class/definition.svg)

## 关系类型

六种关系，各有自己的箭头。左边两个是 UML 里的经典款。

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

![五个类框用不同的箭头相连：空心三角表示继承，实心菱形表示组合，空心菱形表示聚合，另外还有普通箭头和虚线箭头。](/diagrams/class/relations.svg)

## 给关系加标签

关系后面的冒号后面就是两个类型之间的动词。

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

![两个类框由一根标着 feeds 的箭头相连，第一个框旁标着「一」，第二个框旁标着「多」。](/diagrams/class/labels.svg)

## 基数

每端引号里的数字说明涉及多少个该类型的实例。

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

![三个类框：Customer 到 Order 是一对多，Order 到 LineItem 是一对一对多。](/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
```

![并排的两个类框，都用空心三角连到它们上方的第三个类框。](/diagrams/class/direction.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。