Githubがmermaid.jsに対応したので早速使ってみました。

こんにちは。
Twitterでトレンドに上がっていたmermaid.jsとの連携対応が可能になったとの事だったので遊んでみました。
それだけの報告なので、特に技術的な価値はあまりないっす。

実際のGithubでの表示とコードをそれぞれ記載していますので参考にどうぞ！

シーケンス図

書き方。

```mermaid
sequenceDiagram
   ブラウザ->>+Controller: Httpリクエスト
   Controller->>+Service: ロジック層処理
   Service->>+Repository: クエリ発行
   Repository->>+DB: データベース操作
   DB->>-Repository: データベース結果
   Repository->>-Service: データ返却
   Service->>-Controller: コンバート処理
   Controller->>-ブラウザ: Htmlレンダリング

フローチャート

書き方。

 ```mermaid
graph TB
 朝起きる --> 筋トレする
 筋トレする -->|はい| プロテイン飲む
 筋トレする -->|いいえ| お風呂
 プロテイン飲む --> お風呂
 お風呂 --> 保湿
 保湿 --> 休日
 休日　--> |Yes| ゲームする
 休日　--> |No| Slack確認

ステートダイアグラム

書き方。

 ```mermaid
stateDiagram
 [*] --> Render
 Render --> Submit
 Submit --> Loading
 Loading --> Render
 Loading --> dataLoad
 dataLoad --> UseEffect
 UseEffect --> Loading