こんにちは、なかにしです。
業務でシーケンス図を書く機会があり、
チームの方に「Mermaid」便利だよって教えてもらったので、その紹介です！
シーケンス図とは
システム開発において利用される代表的な図式化のひとつです。
オブジェクト間の関係やそこで起きるイベントの流れを、図や記号を使って時系列順で示します。
▼ こんな感じのやつ
Mermaidとは
Mermaidは、フローチャートやシーケンス図を生成できる、マークダウン構文です。
以下はシーケンス図の例です。
sequenceDiagram
participant C as Client
participant S as Server
participant DB as Database
C->>S: GET /items
S->>DB: SELECT * FROM items
DB-->>S: rows
S-->>C: 200 OK (JSON)これを、README.md や Notion のコードスニペット に書くと、シーケンス図が表示されます。
もちろん、そのへんのファイルにMermaid構文で書いても表示はされません。
Mermaidに対応しているサービスを使用する必要があります。
対応しているサービスのメインどころは、以下です。
・Github（.mdファイル）
・Notion（コードスニペット）
・VSCode（.mdファイル）
シーケンス図を書いて SVG や PNG でダウンロードしたい！という要望には、以下がオススメです。
Mermaid Live Editorとは
Mermaidで書いた図のプレビューを確認したり、SVGやPNGでダウンロードできるWebサービスです。
Mermaid Live Editor
ダウンロードは無料の会員登録が必要っぽいです。
さいごに
時間がかかりがちな図を手軽に書けるのはめっちゃ便利ですね。
コードベースなので、Gitで管理できるのも◎です。
さらに、生成AIに「mermaid形式で書いて」と指示をしたらいい感じに書いてくれます。
draw.ioでちまちま書いていた時代は終わったのか…
まだ使ったことがない方は、ぜひ使ってみてください！
今回はここまで！
Enjoy Hacking!!
