マーメイド#7 シーケンス図１

**ひとりマーメイド7日目**
**シーケンス図１**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではシーケンス図の記法を紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/63f9627637226090ec1b

## シーケンス図って何ですか！

前回の記事ではフローチャートの実用例について紹介しました。

今日はシーケンス図の記述について紹介します！
シーケンス図はプロセスの動作と順序を表す図です。上から下に見ていくとプロセスの流れを追うことができます。

```:mermaid
sequenceDiagram
    App ->>+ API: GET /user:id
    API ->>+ Server: auth
    Server-->>-API: user-data
    alt 200
        API-->>App:OK
    else 400
        API-->>-App:error
    end
```

```mermaid
sequenceDiagram
    App ->>+ API: GET /user:id
    API ->>+ Server: auth
    Server-->>-API: user-data
    alt 200
        API-->>App:OK
    else 400
        API-->>-App:error
    end
```

## 基本の記法
先頭にダイアグラムの種類を宣言します。シーケンス図は`sequenceDiagram`です。続いて使用するモジュールや人物を`participant`で宣言しています。こちらは省略可能ですが、記述することでレンダリングの順序を指定することができます。

```:mermaid
sequenceDiagram
    participant App
    participant API
    App ->> API: request
    API -->> App: response
```

```mermaid
sequenceDiagram
    participant App
    participant API
    App ->> API: request
    API -->> App: response
```

## 人物の宣言
`actor`で宣言すると人の形になります。

```:mermaid
sequenceDiagram
    actor me
    actor you
    me ->> you: Thank you
    you -->> me: You're welcome
```

```mermaid
sequenceDiagram
    actor me
    actor you
    me ->> you: Thank you
    you -->> me: You're welcome
```

## ラベル
`as`で任意のラベルを付与することができます。ラベルを用いることで記述を簡略化することができます。

```:mermaid
sequenceDiagram
    participant A as App
    participant B as API
    A ->> B: request
    B -->> A: response
```

```mermaid
sequenceDiagram
    participant A as App
    participant B as API
    A ->> B: request
    B -->> A: response
```

## 矢印の種類
矢印の形状を変えることができます。

```:mermaid
sequenceDiagram 
    a ->    b : 直線
    a -->   b : 点線
    a ->>   b : 矢印
    a -->>  b : 点線矢印
    a -x    b : バツ矢印
    a --x   b : 点線バツ矢印
    a -)    b : オープン矢印
    a --)   b : 点線オープン矢印
```

```mermaid
sequenceDiagram 
    a -> b : ->
    a --> b : -->
    a ->> b : ->>
    a -->> b : -->>
    a -x b : -x
    a --x b : --x
    a -) b : -)
    a --) b : --)
```
一般的にレスポンスには点線が使用されます。

矢印とオープン矢印の違いは同期/非同期です。

```mermaid
sequenceDiagram 
    App ->> API : 同期
    App -) API : 非同期
```

## 活性/非活性
`+`で活性化`-`で非活性化することができます。

```:mermaid
sequenceDiagram
    App ->> +API: request
    API -->> -App: response
```

```mermaid
sequenceDiagram
    App ->> +API: request
    API -->> -App: response
```

多重活性も可能です。

```:mermaid
sequenceDiagram
    App -) +API: GET /user_name
    App -) +API: POST /user_id
    API --) -App: response
    API --) -App: response
```

```mermaid
sequenceDiagram
    App -) +API: GET /user_name
    App -) +API: POST /user_id
    API --) -App: response
    API --) -App: response
```

## ノート
ダイアグラム中にノートを挿入することができます。
以下の3種類のポジションを指定できます。

* 右：`Note right of PARTICIPANT`
* 左：`Note left of PARTICIPANT`
* 中心：`Note over PARTICIPANT`

```:mermaid
sequenceDiagram
    participant App
    Note right of App: note on right
    Note left of App: note on left
    Note over App: note over
```

```mermaid
sequenceDiagram
    participant App
    Note right of App: note on right
    Note left of App: note on left
    Note over App: note over
```

2つの要素に重ねることもできます。3つ以上はできないようです。

```:mermaid
sequenceDiagram
    participant App
    participant API
    Note over App, API: this is note
```

```mermaid
sequenceDiagram
    participant App
    participant API
    Note over App, API: this is note
```

## シーケンスナンバー
`autonumber`と記述すると自動でプロセスに番号が振られます。
```:mermaid
sequenceDiagram
    autonumber
    App ->> API: request
    API ->> Server: connect
    Server -->> API: OK
    API -->> App: response
```

```mermaid
sequenceDiagram
    autonumber
    App ->> API: request
    API ->> Server: connect
    Server -->> API: OK
    API -->> App: response
```

## まとめ

シーケンス図の記述について紹介しました！

↓↓次回の記事はこちら！

https://qiita.com/hirokiwa/items/032c7e37aa361bea5312

## 参考

https://mermaid-js.github.io/mermaid/#/