Mermaid記法に入門しよう

# はじめに
2022年、GithubがMermaid記法に対応したことで、主要なサービス、ツールがMermaid記法をサポートしました。

- [Github](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)
- Notion
- [VS Code](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [esa.io](https://docs.esa.io/posts/308)
- qiita

Mermaidを利用すると、コードで簡単に様々な図を作成できます。
わざわざdrawツールで図を作成しなくても、コードで管理できるようになります。
2022年中に入門しておきましょう！

# Mermaidとは
Mermaid定義によるコードを使用してダイアグラムや図を作成できます。
フローチャート、ダイアグラム、クラス図など様々な種類が用意されています。

https://mermaid.js.org/#/

## フローチャート
```mermaid
flowchart TB
  User-->LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]
```


```
flowchart TB
  User-->LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]
```

## シーケンス
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```
```
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```


## クラス図

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
```

```
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
```

## 状態遷移
```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

```
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

## ER図
```mermaid
erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
```
erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
## ガントチャート
```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
```
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
## ユーザジャーニー
```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
```
```
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
```

## パイチャート
```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```
```
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```


## gitグラフ
※Githubで確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9038/4a975ccd-c92c-7af0-98ce-d5063b38dec6.png)

```
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```
# 書いてみよう
ここでダイアグラム図を作ってみましょう。
https://mermaid.js.org/syntax/sequenceDiagram.html

お題はAPIの処理フローを想定した以下のダイアグラムです。

- お題
```mermaid
sequenceDiagram
    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
    U->>A: request
    Note right of U: parameter
    A->>L: call
    Note right of A: parameter
    rect rgb(191, 223, 255)
    L->>L: Check
    rect rgb(200, 150, 255)
    loop sequence per Id
        L->>DP: Query
        DP->>L: DataSet
    end
    end
    L->>L: BuildResponse
    end
    L->>U: Response
```


```
sequenceDiagram
    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
    U->>A: request
    Note right of U: parameter
    A->>L: call
    Note right of A: parameter
    rect rgb(191, 223, 255)
    L->>L: Check
    rect rgb(200, 150, 255)
    loop sequence per Id
        L->>DP: Query
        DP->>L: DataSet
    end
    end
    L->>L: BuildResponse
    end
    L->>U: Response
```
## 1. 定義部分
図の種類を宣言します。ここでは `sequenceDiagram` としています。
その下には登場人物や要素を定義しています。`AS` を使ってエイリアスをつけておきましょう。

```diff
+ sequenceDiagram
+    actor U AS User
+    participant A AS API
+    participant L AS BackendApp
+    participant DP AS DB
```

```mermaid
sequenceDiagram
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
```
## 2. フロー
以下の通り、`->>`を使ってフローを記載できます。
`Note ○○ of ○○`構文を使うと、メモを残す事ができます。
`autonumber` を入れる事で、連番をシーケンスに追加できます。

```diff
sequenceDiagram
+    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
+    U->>A: request
+    Note right of U: parameter
+    A->>L: call
```

```mermaid
sequenceDiagram
    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
    U->>A: request
    Note right of U: parameter
    A->>L: call
```

## 3. その他特殊なフロー
`loop` 構文を利用してloopを表記する事もできます。
その他パラレルなど様々な表記も可能です。
`rect`を利用してハイライトする事でより対象箇所を明示化する事もできます。
```diff
sequenceDiagram
    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
    U->>A: request
    Note right of U: parameter
    A->>L: call
    Note right of A: parameter
+    rect rgb(191, 223, 255)
+    L->>L: Check
+    rect rgb(200, 150, 255)
+    loop sequence per Id
+        L->>DP: Query
+        DP->>L: DataSet
+    end
+    end
+    L->>L: BuildResponse
+    end
    L->>U: Response
```

```mermaid
sequenceDiagram
    autonumber
    actor U AS User
    participant A AS API
    participant L AS BackendApp
    participant DP AS DB
    U->>A: request
    Note right of U: parameter
    A->>L: call
    Note right of A: parameter
    rect rgb(191, 223, 255)
    L->>L: Check
    rect rgb(200, 150, 255)
    loop sequence per Id
        L->>DP: Query
        DP->>L: DataSet
    end
    end
    L->>L: BuildResponse
    end
    L->>U: Response
```

# さいごに
その他、様々な図の種類、シンタックスがあります。
是非試してみましょう！
https://mermaid.js.org/syntax/sequenceDiagram.html