概要

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

エディタ

マーメイド記法のエディタはたくさん用意されているのでブラウザで簡単に書くことができます。

Mermaid Live Editor

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

グラフ

フローチャート

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

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

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公式ドキュメント