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