コード で シーケンス図 を 描く ～mermaid 記法②～

コード で シーケンス図 を 描く ～mermaid で シーケンス図 を 描く～ mermaid 記法

# 目的

- mermaidでシーケンス図を描く時のルールを描く  
※[mermaid.jsの公式](https://mermaidjs.github.io/#/sequenceDiagram)に記載されているフローチャートを書く方法を紹介する。  
※mermaidについて知りたい方は[こちら](https://qiita.com/miriwo/items/babd1fc51adfa6bc60ad)  
※基本的な記入方法を知りたい方は[こちら](https://qiita.com/miriwo/items/7e26f0d85829bb15e69c)  
※出力方法を知りたい方は[こちら](https://qiita.com/miriwo/items/223443768f545c39298c)  

# 押さえるポイント

- シーケンス図の場合は`sequenceDiagram`と宣言する。
- 最初に定義したプロセスがどのように作用するかを記載する。

# 書き方の例

### プロセスの定義

- プロセスの定義は`praticipant "プロセス名"`とする。
- シーケンス図の左側に描きたいプロセスを先に記載する。
- 説明したい内容に登場するプロセス(登場人物やシステム、ハードウエアなど)を最初に定義する。
- 架空の人物、「太郎」と「花子」の相互作用を表すときは下記の様に記載する。
※ちなみに簡単な図ならプロセスを定義しなくてもシーケンス図は描くことができるが、図に汎用性を持たせるためにはプロセスを定義することをおすすめする。

    ``` mermaid
    sequenceDiagram
        participant 太郎
        participant 花子
    ```

  ![sequence_01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/75dcc172-43c9-ff82-9943-07876dd5a8d5.png)

### プロセス名を変数に格納

- プロセス名は変数に格納する事ができる。
- この考え方を利用することにより相互作用を描くときに毎回プロセス名を記載する必要がなくなり楽である。
- 前述の内容で紹介した「太郎」と「花子」をそれぞれ「NAME_A」と「NAME_B」に格納するときは下記の様に記載する。

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        participant NAME_B as 花子
    ```
  ![sequence_02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/be9a578c-3369-f10b-5179-6c8a7f9db244.png)


### 相互作用のアロー(作用を表す矢印)の描き方

- プロセスAからプロセスBへの矢印は`A->>B`と記載する。
- 矢印の上にテキストを出すときは`A->>B: テキスト`と記載する。
- 前述の内容を踏まえた上で「太郎」と「花子」の関係を記載を下記に記載する。

**スペルミス確認**

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        participant NAME_B as 花子
        NAME_A->>NAME_B: 好き
        NAME_B->>NAME_A: ちょっと好き
    ```

  ![sequence_03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/944aef8c-6664-5a64-a22b-e4340619be8c.png)


###  相互作用のアローの種類

|記入方法  |内容  |
|---|---|
|-> |実線  |
|-->|点線  |
|->> |実線の矢印  |
|-->>|点線の矢印  |
|-x  |実線の矢印の取り消し  |
|--x |点線の矢印の取り消し  |

### アクティベーション

- アウターをアクティブ化、非アクティブ化することができる。
- 専用の宣言方法がある。

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        participant NAME_B as 花子
        NAME_A->>NAME_B: 好き
        activate NAME_A
        NAME_B->>NAME_A: ちょっと好き
        deactivate NAME_A
    ```

### プロセスの横にノートを表示する。

- シーケンス図にメモを追加することができる。
- シーケンス図の横に付箋みたいな感じでテキストを書くことができる。
- コードの例を下記に記載する。

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        Note 左右どちらにノートを作るか of プロセス名: ノートに記載する内容
    ```

- より具体的な例を下記に記載する

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        Note right of NAME_A: 太郎は寒がりです
    ```
  ![sequence_05.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d9a24e11-ffe4-5a55-38e3-c323ea3c7c2b.png)

### 複数のプロセスに跨るノートを表示する。

- シーケンス図の複数プロセスに跨るノートを追加することができる。
- コードの例を下記に記載する。

    ``` mermaid
    # 図の指定
    sequenceDiagram
        # プロセスの定義
        participant NAME_A as 太郎
        participant NAME_B as 花子
        # ノートの指定(ノートが跨るプロセス名をカンマで区切って記載)
        Note over プロセス名,プロセス名: ノートに記載する内容
    ```

- より具体的な例を下記に記載する。

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        participant NAME_B as 花子
        Note over NAME_A,NAME_B: 二人は仲が良い
    ```

  ![sequence_06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c529b33f-f3a8-18e7-32e6-b47d99ecb9be.png)


### ループ

- ループ処理を表現することができる。
- コードの例を下記に記載する。

    ``` mermaid
    # 図の指定
    sequenceDiagram
        # プロセスの定義
        participant NAME_A as 太郎
        participant NAME_B as 花子
        # ループの記載
        loop ループ処理内に表示したいテキスト
        # ループ内の処理
            ループしたい処理をアローなどで記載する
        end
    ```

- より具体的な例を下記に記載する。

    ``` mermaid
    sequenceDiagram
        participant NAME_A as 太郎
        participant NAME_B as 花子
        loop 毎分
            NAME_A->>NAME_B: 見る
            NAME_B->>NAME_A: 話しかける
        end
    ```

  ![sequence_07.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f4788646-a636-5606-ca38-0f46df0d0eed.png)