markdownのmermaidでシーケンス図を書いてみた

Typoraでも使えます。

シーケンス図

矢印の使い方

見え方

ソース

 ```mermaid
sequenceDiagram

# エイリアス
participant app as アプリ
participant fnt as フロント
participant bck as バック

# -----------
# 矢印
# -----------

# 矢印の種類
app->>fnt: 実線の矢印
fnt-->>app: 点線の矢印

# 矢印の種類
app->>+fnt: 実線の矢印
fnt-->>-app: 点線の矢印

# 自分への矢印
app->>app: 点線の矢印

# 矢印の種類

activate app
app->>fnt: 実線の矢印
deactivate app
activate fnt

fnt-->>app: 点線の矢印
deactivate fnt
activate app
deactivate app

 ```

Noteの使い方

見え方

ソース

 ```mermaid
sequenceDiagram

# エイリアス
participant app as アプリ
participant fnt as フロント
participant bck as バック

# Noteの使い方
Note over app, bck: 横断するNoteの書き方
Note over app: 線の上に<br>Noteを記述する
Note right of app: 線と線の間に<br>Noteを記述する

 ```

条件分岐/ループ

見え方

ソース

 ```mermaid
sequenceDiagram

# エイリアス
participant app as アプリ
participant fnt as フロント
participant bck as バック

# -----------
# 条件
# -----------
## 条件分岐
alt 正常系
fnt->>app: 実線の矢印
else 異常系
fnt-->>app: 点線の矢印
end

# 条件指定
opt 条件（elseが無いときに使用する）
app->>fnt: 実線の矢印
end

# 条件指定
loop ループ処理
fnt->>fnt: 実線の矢印
end

 ```

色付け

見え方

ソース

 ```mermaid
sequenceDiagram

# エイリアス
participant app as アプリ
participant fnt as フロント
participant bck as バック

# -----------
# 背景色を指定する
# -----------
# 背景色（ピンク）
rect rgba(255, 0, 255, 0.1)
fnt ->> fnt: 背景色ピンク　rect rgba(255, 0, 255, 0.1)　end
end

# 背景色（水色）
rect rgba(0, 255, 255, 0.1)
fnt ->> fnt: 背景色水色　rect rgba(0, 255, 255, 0.1)　end
end

# 背景色（黄色）
rect rgba(255, 255, 0, 0.1)
fnt ->> fnt: 背景色黄色　rect rgba(255, 255, 0, 0.1)　end
end

 ```

---

サンプル

見え方

ソース

※ 最初の行と最後の行の先頭の半角スペースだけ削除して使用してください。

 ```mermaid
sequenceDiagram
# エイリアス
participant app as アプリ
participant fnt as フロント
participant bck as バック
# シーケンス
activate app
Note right of app: user_id:ユーザーID<br>data_id:データID
app->>fnt: APIコール（GET）
activate fnt
Note right of fnt: バリデーション実施
Note right of fnt: user_id: ユーザーID<br>data_id:データID
fnt->>bck: 指定リソース取得要求
deactivate fnt
activate bck
Note right of bck: データ検索＆ソート
bck->>fnt: データ返却
activate fnt
deactivate bck
fnt->>fnt: レスポンス整形
Note over fnt: 返却データ生成
fnt->>app: 応答
deactivate fnt
deactivate app
 ```