マーメイド#1 マーメイドとは

**ひとりマーメイド1日目**
**マーメイドとは**

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

この記事ではマーメイドで作成できるダイアグラムをざっくりと紹介します！

## マーメイドとは
マーメイドはテキストとコードで図を記述する、Javascriptベースのツールです。マークダウンの作図版と考えるとわかりやすいでしょう。

## 主なダイアグラム
結構いろいろ書けます。細かい記法は後日紹介するので、

**\\\へーこんなことができるんだぁ//**

程度に眺めてください！

マーメイドは進化が止まらないので、ダイアグラムの種類も増え続けてるみたいですね。

## フローチャート
```: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
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
```

## クラス図

```:mermaid
classDiagram
    Animal <|-- Bird
    Animal <|-- Fish
    Animal <|-- Penguin
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +born()
    class Bird{
        +String beakColor
        +fly()
    }
    class Fish{
        -int sizeInFeet
        +swim()
        -Eat()
    }
    class Penguin{
        +bool is_Linux
        +run()
        +swim()
    }

```

```mermaid
classDiagram
    Animal <|-- Bird
    Animal <|-- Fish
    Animal <|-- Penguin
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +born()
    class Bird{
        +String beakColor
        +fly()
    }
    class Fish{
        -int sizeInFeet
        +swim()
        -Eat()
    }
    class Penguin{
        +bool is_Linux
        +run()
        +swim()
    }

```

## 状態遷移図

```:mermaid

stateDiagram-v2

    [*] --> Wait
    Wait --> Do
    Stop --> Do
    Do --> Stop
    Do --> [*]
    Stop --> [*]

```

```mermaid

stateDiagram-v2

    [*] --> Wait
    Wait --> Do
    Stop --> Do
    Do --> Stop
    Do --> [*]
    Stop --> [*]

```


## 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

pie title Favorite Fruit
    "Strawberry" : 87
    "Orange" : 42
    "Grape" : 29

```

```mermaid

pie title Favorite Fruit
    "Strawberry" : 87
    "Orange" : 42
    "Grape" : 29

```


## まとめ
マーメイドって便利なんですねぇ

今すぐ書きたくなったでしょ？？？

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

https://qiita.com/hirokiwa/items/37ccf5ad177b40aea682

## 参考

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