マーメイド#8 シーケンス図２

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

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

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

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/a8fbe82710afe6ef0283

## まーめいど！しーけんす！

前回の記事ではシーケンス図の基本構文を紹介しました！

引き続きシーケンス図について理解を深めていきます！

## ループ
ループ処理の記述です。
`loop ループ条件`で始まって`end`で終わります。
```
loop ループ条件
    ~~
end
```


```:mermaid
sequenceDiagram
    loop Every minute
        App ->> API: request
    end
    API -->> App: response
```

```mermaid
sequenceDiagram
    loop Every minute
        App ->> API: request
    end
    API -->> App: response
```

## 条件分岐
いわゆるif文です。`alt`が`if`の役割を果たします。
```
alt 条件
    ~~
else 条件
    ~~
end
```

```:mermaid
sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end
```

```mermaid
sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end
```
追加のレスポンスがある場合は`opt`で付け足します。

```:mermaid
sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end
    opt every time
        API -->> App: optional response
    end
```


```mermaid
sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end
    opt every time
        API -->> App: optional response
    end
```

## 並列処理
`par` で並列処理を表します。

```
par 処理１
    ~~
and 処理２
    ~~
and 処理３
    ~~
end
```

```:mermaid
sequenceDiagram
    par Get user_id
        App -) API: GET / profile_image
    and Get images
        App -) API: GET / header_image
    end
    API --) App: image
```

```mermaid
sequenceDiagram
    par Get user_id
        App -) API: GET / profile_image
    and Get images
        App -) API: GET / header_image
    end
    API --) App: image
```

## クリティカルセッション

`critical`を用いて特定の条件で自動発生する要件を記述します。

```
critical 処理
    ~~
option 条件１
    ~~
option 処理２
    ~~
end
```

※古いバージョンのエディタではレンダリングできないことがあります。

```:mermaid
sequenceDiagram
    critical connect
        App ->> API: GET
    option time out
        App ->> App: error
    end     
```

[![](https://mermaid.ink/img/pako:eNptjrEOwjAMRH_F8lx-IEOlSiDEhgRjFisxENE4IXUGVPXfSanYuOl074Y3o0ue0eDEr8rieB_oXihagRZXggZHI7gkwk63dc2QM-z6HobzycDxcN1IyhqSgIbIkOq_e84GuJRUNsbivxw7jFwiBd9U5pVZ1AdHtmha9VSeFq0s7UdV0-UtDo2Wyh3W7El_2mhuNE68fADVtUL8?type=png)](https://mermaid.live/edit#pako:eNptjrEOwjAMRH_F8lx-IEOlSiDEhgRjFisxENE4IXUGVPXfSanYuOl074Y3o0ue0eDEr8rieB_oXihagRZXggZHI7gkwk63dc2QM-z6HobzycDxcN1IyhqSgIbIkOq_e84GuJRUNsbivxw7jFwiBd9U5pVZ1AdHtmha9VSeFq0s7UdV0-UtDo2Wyh3W7El_2mhuNE68fADVtUL8)

## Break
特定の条件下で処理を中断する場合の記述です。

```
break 条件
    ~~
end
```

※古いバージョンのエディタではレンダリングできないことがあります。

```:mermaid
sequenceDiagram
    App ->> API: request
    API ->> Server: connect
    break Unauthorized
        Server --> API: error
    end
```

[![](https://mermaid.ink/img/pako:eNo1jz0OgzAMha8SeYYLZEBC6sKGhLplcRO3IBqHmqRSi7h7w0_fZPl79rMXsMERaJjplYgtXQZ8CHrDKqueJlVWlarbRivZHHM8SdvspCN5k2hlAzPZE96EcFRXxhT7IMOX3NHfdAyosjy3kkiQAxO73QIFeBKPg8t3LRszEHvyZEDn0qGMBgyv2ZcTQvdhCzpKogLS5DD-fwB9x-dM6w_JA0gT?type=png)](https://mermaid.live/edit#pako:eNo1jz0OgzAMha8SeYYLZEBC6sKGhLplcRO3IBqHmqRSi7h7w0_fZPl79rMXsMERaJjplYgtXQZ8CHrDKqueJlVWlarbRivZHHM8SdvspCN5k2hlAzPZE96EcFRXxhT7IMOX3NHfdAyosjy3kkiQAxO73QIFeBKPg8t3LRszEHvyZEDn0qGMBgyv2ZcTQvdhCzpKogLS5DD-fwB9x-dM6w_JA0gT)

## 背景色
プロセスの特定の領域を強調することができます。色の指定は`rgb`でおこないます。

```
rect rgb(0, 0, 0)
    ~~
end
```

```:mermaid
sequenceDiagram
    rect rgb(175, 238, 238)
        App -) +API: GET /user_name
        rect rgb(255, 182, 193)
            App -) +API: POST /user_id
            API --) -App: response
        end
        API --) -App: response
    end
```

```mermaid
sequenceDiagram
    rect rgb(175 238 238)
        App -) +API: GET /user_name
        rect rgb(255 182 193)
            App -) +API: POST /user_id
            API --) -App: response
        end
        API --) -App: response
    end
```

## エンティティコード
`#`を用いて特殊文字を記述することができます。

```:mermaid
sequenceDiagram
    actor me
    actor you
    me ->> you: I #9829; you!
    you ->> me: I #9829; you #infin; times more!
```

```mermaid
sequenceDiagram
    actor me
    actor you
    me ->> you: I #9829; you!
    you ->> me: I #9829; you #infin; times more!
```

## プルダウンメニュー
プルダウンメニューに URL を埋め込むことができます。
`link PERTICIPANT: LINK-LABEL @URL`

```:mermaid
sequenceDiagram
    participant User
    participant App

    link User: profile @https://qiita.com/hirokiwa
    link User: Github @https://github.com/hirokiwa
    link App: Qiita @https://qiita.com
    link App: Github @https://github

    User ->> App: request
    App -->> User: response
```

```mermaid
sequenceDiagram
    participant User
    participant App

    link User: profile @https://qiita.com/hirokiwa
    link User: Github @https://github.com/hirokiwa
    link App: Qiita @https://qiita.com
    link App: Github @https://github

    User ->> App: request
    App -->> User: response
```

カーソルを合わせるとプルダウンが出現してリンクをクリックできるようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/61a7a6af-b8ca-647b-3264-af0655a0edd7.png" width=450px>

## まとめ

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

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

https://qiita.com/hirokiwa/items/1a490c75961efd1e1487

## 参考

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