マーメイド#8 シーケンス図２

ひとりマーメイド8日目
シーケンス図２

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではシーケンス図の記法を紹介します！

↓↓前回の記事はこちら

まーめいど！しーけんす！

前回の記事ではシーケンス図の基本構文を紹介しました！

引き続きシーケンス図について理解を深めていきます！

ループ

ループ処理の記述です。
loop ループ条件で始まってendで終わります。

loop ループ条件
    ~~
end

mermaid

sequenceDiagram
    loop Every minute
        App ->> API: request
    end
    API -->> App: response

条件分岐

いわゆるif文です。altがifの役割を果たします。

alt 条件
    ~~
else 条件
    ~~
end

mermaid

sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end

追加のレスポンスがある場合はoptで付け足します。

mermaid

sequenceDiagram
    App ->> API: request
    alt OK
        API -->> App: 200
    else error
        API -->> App: 400
    end
    opt every time
        API -->> App: optional response
    end

並列処理

par で並列処理を表します。

par 処理１
    ~~
and 処理２
    ~~
and 処理３
    ~~
end

mermaid

sequenceDiagram
    par Get user_id
        App -) API: GET / profile_image
    and Get images
        App -) API: GET / header_image
    end
    API --) App: image

クリティカルセッション

criticalを用いて特定の条件で自動発生する要件を記述します。

critical 処理
    ~~
option 条件１
    ~~
option 処理２
    ~~
end

※古いバージョンのエディタではレンダリングできないことがあります。

mermaid

sequenceDiagram
    critical connect
        App ->> API: GET
    option time out
        App ->> App: error
    end     

Break

特定の条件下で処理を中断する場合の記述です。

break 条件
    ~~
end

※古いバージョンのエディタではレンダリングできないことがあります。

mermaid

sequenceDiagram
    App ->> API: request
    API ->> Server: connect
    break Unauthorized
        Server --> API: error
    end

背景色

プロセスの特定の領域を強調することができます。色の指定はrgbでおこないます。

rect rgb(0, 0, 0)
    ~~
end

mermaid

sequenceDiagram
    rect rgb(175, 238, 238)
        App -) +API: GET /user_name
        rect rgb(255, 182, 193)
            App -) +API: POST /user_id
            API --) -App: response
        end
        API --) -App: response
    end

エンティティコード

#を用いて特殊文字を記述することができます。

mermaid

sequenceDiagram
    actor me
    actor you
    me ->> you: I #9829; you!
    you ->> me: I #9829; you #infin; times more!

プルダウンメニュー

プルダウンメニューに URL を埋め込むことができます。
link PERTICIPANT: LINK-LABEL @URL

mermaid

sequenceDiagram
    participant User
    participant App

    link User: profile @https://qiita.com/hirokiwa
    link User: Github @https://github.com/hirokiwa
    link App: Qiita @https://qiita.com
    link App: Github @https://github

    User ->> App: request
    App -->> User: response

カーソルを合わせるとプルダウンが出現してリンクをクリックできるようになります。

まとめ

シーケンス図の記述について紹介しました！

↓↓次回の記事はこちら！！

参考