# Mermaid ユースケース図のチートシート

アクター、ユースケース、そしてそれらを囲むシステム。

## アクターとユースケース

アクターは名前、ユースケースは丸括弧の中の名前です。矢印は、そのアクターが参加することを表します。

```mermaid
usecase-beta
  actor Customer
  actor Support
  Customer --> Checkout
  Support --> Track
```

![Customer と Support の 2 人のアクターが、Checkout と Track の 2 つのユースケースを指しています。](/diagrams/usecase/actors.svg)

## システム境界

systemBoundary と end のあいだのものはすべてシステムに属します。外にあるユースケースは属しません。

```mermaid
usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout
```

![Customer のアクターが、Storefront という箱を指しています。その中に Browse catalogue と Checkout が入っています。](/diagrams/usecase/boundary.svg)

## include 関係

コロンのあとに語が続く破線矢印は、一方のユースケースが他方を使うことを表します。

```mermaid
usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout
  Checkout ..> : include Browse
```

![Browse catalogue と Checkout を持つ Storefront 境界。Checkout から include Browse とラベルされた破線が伸びています。](/diagrams/usecase/relations.svg)

## 方向

フローチャートと同じキーワードです。TD、TB、BT、LR、RL。

```mermaid
usecase-beta
  direction LR
  actor Customer
  systemBoundary Storefront
    Checkout("Checkout")
  end
  Customer --> Checkout
```

![左の Customer のアクターが、Checkout を持つ Storefront 境界を指しています。左から右に並んでいます。](/diagrams/usecase/direction.svg)

## Mernyx で描いてみる

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