【フローチャート記述】全人類に伝えたいマーメイド記法

# 概要
フローチャート、シーケンス図、ER図.........
マーメイド記法はさまざまな図をテキストで記述できる便利な記法です。この記事ではマーメイド記法の具体的な用途を紹介します。細かい記法は [mermaid公式ドキュメント](https://mermaid-js.github.io/mermaid/#/) で確認できます。

# エディタ
マーメイド記法のエディタはたくさん用意されているのでブラウザで簡単に書くことができます。
* [Mermaid Live Editor](https://mermaid.live/edit#pako:eNpVj80OgkAMhF-l6UkTeQEOJgLKxUQTvbEcGqjsRvcnyxJjgHd30Yv21HS-mUxHbGzLmGLnyUm4FsJAnF2VS6_6oKmvIUm2U8kBtDX8miBblRZ6aZ1Tplt_-WyBIB-PC8YQpDL3-SvlH__J8ARFdSQXrKt_levTTrCv1FnG-H9Feo6uQ3Wj9EZJQx5y8h8EN6jZa1JtrD4uF4FBsmaBaVxb8neBwsyRoyHYy8s0mAY_8AYH11LgQlH8WGMMfvQ8vwGEfFP7)

さらに VScode, Github, Notion, Qiita でも記述可能です。
(↓↓以前投稿した記事でもしれっと使ってる！)

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

# グラフ

### フローチャート
```mermaid
graph TB
    A([start])-->B{true?}
    B--Yes-->C[process]
    B--No-->D[exception]
    C-->E([end])
    D-->E
```


```:mermaid
graph TB
    A([start])-->B{true?}
    B--Yes-->C[process]
    B--No-->D[exception]
    C-->E([end])
    D-->E
    
```

### 状態遷移図
```mermaid
graph LR
	A((S1))--1/1-->B((S2))
	B--1/1-->C((S3))
	C--1/1-->A
	A--0/0-->A
	B--0/0-->B
	C--0/0-->C
```

```:mermaid
graph LR
	A((S1))--1/1-->B((S2))
	B--1/1-->C((S3))
	C--1/1-->A
	A--0/0-->A
	B--0/0-->B
	C--0/0-->C
```

# シーケンス図
```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
```

# ER図

```mermaid
erDiagram

    user{
        number user_id
        string user_name
    }

    follow{
        number follow_id
        number user_id
    }

    follower{
        number follower_id
        number user_id
    } 

    post{
        number post_id
        number user_id
        string title
        string text
        datetime posted_at
    }

    reply{
        number reply_id
        number reply_to
        number user_id
        string text
        datetime posted_at
    }

    user ||--o{ follow: ""
    user ||--o{ follower: ""
    user ||--o{ post: ""
    post ||--o{ reply: ""

```

```:mermaid
erDiagram

    user{
        number user_id
        string user_name
    }

    follow{
        number follow_id
        number user_id
    }

    follower{
        number follower_id
        number user_id
    } 

    post{
        number post_id
        number user_id
        string title
        string text
        datetime posted_at
    }

    reply{
        number reply_id
        number reply_to
        number user_id
        string text
        datetime posted_at
    }

    user ||--o{ follow: ""
    user ||--o{ follower: ""
    user ||--o{ post: ""
    post ||--o{ reply: ""

```
# ガントチャート

```mermaid
gantt
    title develop
    dateFormat YYYY-MM-DD

    section Develop
    Plan:a,2022-10-09 ,1m
    Design:b,after a ,1m
    Implement:c,after b ,2m
    QA:d,after c, 1m
    Release:e,after d, 1m
```

```:mermaid
gantt
    title Develop
    dateFormat YYYY-MM-DD

    section Develop
    Plan:a,2022-10-09 ,1m
    Design:b,after a ,1m
    Implement:c,after b ,2m
    QA:d,after c, 1m
    Release:e,after d, 1m
```
# gitグラフ

```mermaid
gitGraph:
    commit
    commit
    branch develop
    commit
    checkout master
    merge develop
    commit
```

```:mermaid
gitGraph:
    commit
    commit
    branch develop
    commit
    checkout master
    merge develop
    commit
```

# カスタマージャーニーマップ
```mermaid
journey
    title Develop
        Code: 4
        Error: 1
        Debug: 2
        execute: 5
```


```:mermaid
journey
    title Develop
        Code: 4
        Error: 1
        Debug: 2
        execute: 5
```

# 参考
[mermaid公式ドキュメント](https://mermaid-js.github.io/mermaid/#/)

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