【Markdown】Mermaid記法を使って、テキストでSAMLとOIDCのシーケンス図を書いてみる

Mermaid記法って？

Mermaid記法は、Markdownで用いられるテキストのみで図を書く仕組みです。

シーケンス図やフローチャート、状態遷移図、ER図などなど、幅広く対応しています。

実際に、SAMLとOIDCのシーケンス図を書いてみた

SAML

以下のようにコードを書くと

```mermaid
sequenceDiagram
participant client as クライアント
participant idp as IdP(Okta等)
participant sp as SP(アプリ)
    client ->> sp: 利用者がアプリURLにアクセス
    Note right of sp:利用者がアプリに未ログインの場合、SAMLフロー開始
    sp -->> client: IdPにリダイレクト
    client ->> idp: 
    idp -->> client: IdP未ログインの場合、IdPログインを要求
    client ->>+ idp: 利用者がIdPにログイン
     Note right of idp: IdPログイン(＆MFA等)
    idp -->>- client: 
    client ->>+ sp: ログイン成功時、アプリにリダイレクト
    Note left of sp: SAMLアサーション連携
    Note right of sp: アプリ側でSAMLアサーションを検証後、アプリ認証完了
    client ->> sp: アプリのログイン状態が持続している場合、直接アプリにアクセス
```

こんな感じで表示されます。

OIDC

OIDC(認可コードフロー)の場合も

```mermaid
sequenceDiagram
participant client as クライアント
participant idp as IdP(Okta等)
participant sp as SP(アプリ)
    client ->> sp: 利用者がアプリURLにアクセス
    Note right of sp:利用者がアプリに未ログインの場合、OIDCフロー開始
    sp -->> client: IdPにリダイレクト
    client ->> idp: 
    Note right of idp: 認可エンドポイント
    idp -->> client: IdP未ログインの場合、IdPログインを要求
    client ->>+ idp: 利用者がIdPにログイン
     Note right of idp: IdPログイン(＆MFA等)＋同意
    idp -->>- client: 
    client ->>+ sp: ログイン成功時、アプリにリダイレクト
    sp ->> idp: 認可コードを送信
    Note left of idp: トークンエンドポイント
    idp -->> sp: IDトークン(アクセストークン)を返却
    Note right of sp: アプリ側でIDトークンを検証後、アプリ認証完了
    sp ->> idp: IDトークン(アクセストークン)を送信
    Note left of idp: UserInfoエンドポイント
    idp -->> sp: ユーザ情報を連携
    client ->> sp: アプリのログイン状態が持続している場合、直接アプリにアクセス
```

このように表示されます。