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

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

概要

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

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

マーメイドとは

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

主なダイアグラム

結構いろいろ書けます。細かい記法は後日紹介するので、

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

程度に眺めてください！

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

フローチャート

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

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 --> [*]

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

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

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

円グラフ

mermaid

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

まとめ

マーメイドって便利なんですねぇ

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

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

参考