# 【Mermaid】概要及び基本的な使い方

- [【Mermaid】概要及び基本的な使い方](#mermaid概要及び基本的な使い方)
  - [各図形の基本的な書き方](#各図形の基本的な書き方)
    - [フローチャート図](#フローチャート図)
    - [シーケンス図](#シーケンス図)
    - [クラス図](#クラス図)
    - [ER図(データ概念図 CDMD)](#er図データ概念図-cdmd)
    - [アーキテクチャ図](#アーキテクチャ図)
    - [ガントチャート](#ガントチャート)
  - [図形の設定について](#図形の設定について)
    - [テーマの設定](#テーマの設定)
  - [Tips](#tips)
    - [VSCodeにスぺニットを設定する(シーケンス図)](#vscodeにスぺニットを設定するシーケンス図)


**(参考リンク)**
* [公式サイト](https://mermaid.js.org/intro/)
* [公式 WEB Editor](https://mermaid.live/edit#p) 
* [notepm-Mermaid記法の書き方](https://help.notepm.jp/hc/ja/articles/17267311368729-Mermaid%E8%A8%98%E6%B3%95%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9-Markdown%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A7%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88-%E3%82%B0%E3%83%A9%E3%83%95%E3%81%8C%E6%8F%8F%E3%81%91%E3%82%8B-
)

Mermaidが対応していないコンテンツでも公式サイトのエディタを
活用することで図形をリンクさせることが可能です

---

## 各図形の基本的な書き方

### フローチャート図

````
```mermaid
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
   C -->|Three| F[fa:fa-car Car]  
```
````

```mermaid
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
   C -->|Three| F[fa:fa-car Car]  
```

### シーケンス図

* **古いバージョンではactor、participantが対応していない**

````
```mermaid
sequenceDiagram
  actor User
  participant Front
  participant Server
  User->>Front: URLをリンクする
  Front-->>User: 一覧画面を表示する
  User->>Front: 検索する
  loop 対象商品
  Front->>Server: 商品情報を取得する
  Server-->>Front: レスポンス
  end
  Front-->>User: 検索結果を表示する
  Note right of Front: Product Find <br/>sequence
```
````

[![sequence](https://mermaid.ink/img/pako:eNptkU9LwzAYxr9KyHnFe5GexJOKOHaRXmKTbYU1qVkiyBi4Fr14UPyLsIkbQ0WEMVRwCvsysev8FqatpYi7Je_7e9734X1a0GGYQBM2ya4k1CErLqpx5NncpgAgRzAOKk3Cs7-PuHAd10dUgFXOqPhfLhO-l-GJzLCslDNBZWtNBWcqfFLhiwpGqnOjguMES_uGBhPeBF_vB_P7h_ji87s30IJ5_zEefhT036GzYTd-HRTdBmM-iEbT-bgfXR5F551igWVlzkyQdWbhYXQ31huik6toel3MyDCjWKLCZxVMVNhLnU8ShlC8wHrmJn47nd12F1jfYIIA7tbqArAq-B2-yRmWjr6mSzFY3uFLVh5EIoEl6BHuIRfrhFrJqW0o6sQjNjT1E5Mqkg1hQ5u2NYqkYOV96kBTcElKUPoYiTxQaFZRo6mrBLs61PUs9TT8EuRM1uq5TMe4zVguaP8AZJXvtw?type=png)](https://mermaid.live/edit#pako:eNptkU9LwzAYxr9KyHnFe5GexJOKOHaRXmKTbYU1qVkiyBi4Fr14UPyLsIkbQ0WEMVRwCvsysev8FqatpYi7Je_7e9734X1a0GGYQBM2ya4k1CErLqpx5NncpgAgRzAOKk3Cs7-PuHAd10dUgFXOqPhfLhO-l-GJzLCslDNBZWtNBWcqfFLhiwpGqnOjguMES_uGBhPeBF_vB_P7h_ji87s30IJ5_zEefhT036GzYTd-HRTdBmM-iEbT-bgfXR5F551igWVlzkyQdWbhYXQ31huik6toel3MyDCjWKLCZxVMVNhLnU8ShlC8wHrmJn47nd12F1jfYIIA7tbqArAq-B2-yRmWjr6mSzFY3uFLVh5EIoEl6BHuIRfrhFrJqW0o6sQjNjT1E5Mqkg1hQ5u2NYqkYOV96kBTcElKUPoYiTxQaFZRo6mrBLs61PUs9TT8EuRM1uq5TMe4zVguaP8AZJXvtw)

APIのサンプル例

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

### クラス図

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

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

### ER図(データ概念図 CDMD)

データベースのスキーマを表現したりするのに使われるER図です
「概念データモデル（CDM: Conceptual Data Model）」 

````
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
````

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

(リレーション用のsymbol)
* `||--||` : 1対1 (One to One)
* `}o--||` : 多対1 (Many to One)
* `o{--||` : 1対多 (One to Many)
* `}o--o{` : 多対多 (Many to Many)

### アーキテクチャ図

**古いバージョンではアーキテクチャ図が対応していない**

````
```mermaid
architecture-beta
    group public_api(cloud)[Public API]
    group private_api(cloud)[Private API] in public_api
    service database(database)[Database] in private_api
    service server(server)[Server] in private_api

    server:R -- L:database
```
````

[![](https://mermaid.ink/img/pako:eNptkMFqwzAQRH9F7MkG-wd0K-RSaCE0t1qlrKWNLbAlsZYCJeTfK9sVTUN12WH1ZhbmCtobAgnIerSRdExMbU8RFSsn8hvYpyBC6ierPzHYSk8-mbo7bhvxdHz-eEDZXjDSH3ZfbbCw7i6tWBfii9UkDEbscaGqiLo7_Kjd-Rv-aF0ncbWPujtt8z_TvZFYvom2FS-yHFx_oYGZeEZrcjPXlVYQR5pJgczS0BnTFBUod8sopuhPX06DjJyogRRyFh0sDoxzWZKx0fPrXvbWeQO5rmEsQED37n3mzzgtdPsG-VmP1Q?type=png)](https://mermaid.live/edit#pako:eNptkMFqwzAQRH9F7MkG-wd0K-RSaCE0t1qlrKWNLbAlsZYCJeTfK9sVTUN12WH1ZhbmCtobAgnIerSRdExMbU8RFSsn8hvYpyBC6ierPzHYSk8-mbo7bhvxdHz-eEDZXjDSH3ZfbbCw7i6tWBfii9UkDEbscaGqiLo7_Kjd-Rv-aF0ncbWPujtt8z_TvZFYvom2FS-yHFx_oYGZeEZrcjPXlVYQR5pJgczS0BnTFBUod8sopuhPX06DjJyogRRyFh0sDoxzWZKx0fPrXvbWeQO5rmEsQED37n3mzzgtdPsG-VmP1Q)

### ガントチャート

````
```mermaid
gantt
    title work
    dateFormat YYYY-MM-DD
    section work_A
    準備    :a1 ,2023-08-12 ,1d
    作業    :a2 ,2023-08-14 ,2d
    リリース :a3 ,after a2 ,1d

    section work_B
    準備    :b1 ,after a2 ,1d
    作業_1  :b2 ,after b1 ,3d
    作業_2  :b3 ,after b1 ,2d
    リリース :b4 ,after b2 ,1d
```
````


```mermaid
gantt
    title work
    dateFormat YYYY-MM-DD
    section work_A
    準備    :a1 ,2023-08-12 ,1d
    作業    :a2 ,2023-08-14 ,2d
    リリース :a3 ,after a2 ,1d

    section work_B
    準備    :b1 ,after a2 ,1d
    作業_1  :b2 ,after b1 ,3d
    作業_2  :b3 ,after b1 ,2d
    リリース :b4 ,after b2 ,1d
```

## 図形の設定について

### テーマの設定

**参考記事:**
* [zenn-Mermaid のテーマ・スタイルの変更方法](https://zenn.dev/junkawa/articles/zenn-mermaidjs-theme-config)



```sh
%%{init:{'theme':'base'}}%%
```

**default**

設定しない場合もこのスタイルになります

```mermaid
%%{init:{'theme':'default'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

**base**

```mermaid
%%{init:{'theme':'base'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

**forest**

```mermaid
%%{init:{'theme':'forest'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

**dark**

```mermaid
%%{init:{'theme':'dark'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

**neutral**

```mermaid
%%{init:{'theme':'neutral'}}%%
graph LR
  q(QEMU) --> qemu-boot-shim --> physboot --> zircon
```

## Tips

### VSCodeにスぺニットを設定する(シーケンス図)

1. [Ctrl] + [Shift] + [P]を入力する
2. "Snippets: Configure Snippets"を入力する
3. mermaid.jsonというスニペットファイルを作成する
4. 使って確かめてみる
   1. Mermaidをサポートするファイルを開く(.mdまたは.mmd)
   2. "mermaid:sequence"と入力する
   3. Tabキーを押下する

```json
{
	"Mermaid sequence Diagram": {
		"prefix": "mermaid:sequence",
    
		"body": [
			"sequenceDiagram",
			"    actor User",
			"    participant Front",
			"    participant Server",
			"    User->>Front: Click Button",
			"    Front->>Server: Request Data",
			"    Server-->>Front: Return Data",
			"    Front-->>User: Display Data"
		],
	"description": "Create a sequence diagram"
	}
}
```

でない場合はデフォルトでスニペットが無効に
なっている場合があります

markdownでも有効にする場合は`markdown.json`に以下を追記する

```json
	"Mermaid sequence Diagram": {
		"prefix": "mermaid:sequence",
		"body": [
			"```mermaid",
			"sequenceDiagram",
      "    actor User",
      "    participant Front",
      "    participant Server",
      "    User->>Front: Click Button",
      "    Front->>Server: Request Data",
      "    Server-->>Front: Return Data",
      "    Front-->>User: Display Data",
      "```"
			],
		"description": "Create a sequence diagram"
	}	
```