mermaid大好きになっている

はじめに

こんばんは。

最近 mermaid 書くのにはまっています。

今までは ER図は tbls で シーケンス図は PlantUML を使ってたんですが、全部 mermaid使ってます。

githubが判断してくれるのがありがたいですよね。

github.com

plantuml.com

本題

mermaidで僕が現在使っているのは、ER図、フローチャート図、シーケンス図です。

ER図

%%{init:{'theme':'default'}}%%
erDiagram

users {
  integer id PK "ユーザーID"
  string email "メールアドレス"
  string password "パスワード"
}

users ||--|| user_profiles : "1:1"
user_profiles {
  integer user_id FK "ユーザーID"
  string name "ユーザー名"
  string tel "電話番号"
  integer gender "性別"
  date birthday "誕生日"
  string postal_code "郵便番号"
  string address "住所詳細"
}

items {
  integer id PK "アイテムID"
  string name "アイテム名"
}

tags {
  integer id PK "タグID"
  string name "タグ名"
}

items ||--|{ item_tags: "1:N"
tags ||--|{ item_tags: "1:N"
item_tags {
  integer item_id FK "アイテムID"
  integer tag_id FK "タグID"
}

orders }|--|| users: "N:1"
orders }|--|| items: "N:1"
orders {
  integer id PK "オーダーID"
  integer user_id FK "ユーザーID"
  integer item_id FK "アイテムID"
}

フローチャート図

%%{init:{'theme':'forest'}}%%
flowchart TD
    A[注文実行] --> B{リピーターかどうか}
    B -->|リピーター| C[10%OFFクーポン配布]
    C --> D[決済実行]
    B -->|初回| E[5%OFFクーポン配布]
    E --> D

シーケンス図

sequenceDiagram
autonumber

participant user as ユーザー
participant site as サイト
participant api as 決済API
rect rgb(100, 100, 100)
    user ->>+ site: 注文実行
    site ->>+ api: 決済実行
    api ->>+ site: 決済OK
    site ->>+ site: 注文確定
    site ->>+ user: 注文完了ページ
end

終わりに

マジでかんたんでこういうの書くハードルが下がりました。

クラス図とかもかけるっぽいんで、今後積極的に書いていきたいです。

現場からは以上です。