Mermaidを使ってシーケンス図を書こう。

Mermaidでシーケンス図を書いてみよう

Mermaidについては以下の記事を参照ください。

Markdownで図は書けるのかMarkdownを使っていると、少し図を入れたいなどと思うことがあります。ありものの図であれば画像ファイル化して埋め込めばいいのですが、自分で作る図となるとそうはいきません。ちなみに、図といってもフローチャ...

今回はMermaidを使ってシーケンス図を書いてみます。

Sequence Diagram（シーケンス図）の書き方

シーケンス図はある動作に対する処理の流れを記載したものです。

以下のサンプルをもとに説明していきます。

    ```mermaid
    sequenceDiagram
        autonumber
        actor 佐藤さん
        participant パソコン
        participant プリンター
        actor 鈴木さん

        佐藤さん->>パソコン: 印刷
        par 機械処理
            パソコン->>プリンター: 印刷命令
            プリンター-->>プリンター: 印刷
        end
        Note right of 鈴木さん: 鈴木さんの方が近い
        鈴木さん->>プリンター: 印刷物を取る
        鈴木さん->>佐藤さん: 印刷物を渡す
    ```

    ```mermaid

まずは、「ここからMermaidを書くぞ」の記載です。
これはMarkdownのコードを書く書式と同じで、コード名を「mermaid」とするだけです。

    sequenceDiagram

次に「Mermaid」の中の「sequenceDiagram」だと指定します。

        autonumber

続けてオプションの「autonumber」を指定します。
これは図の起点となる丸の部分に数字を入れて、処理の順番をわかりやすくするものです。

指定しなければ丸の中に数字は入りません。

        actor 佐藤さん
        participant パソコン
        participant プリンター
        actor 鈴木さん

        佐藤さん->>パソコン: 印刷
        par 機械処理
            パソコン->>プリンター: 印刷命令
            プリンター-->>プリンター: 印刷
        end
        Note right of 鈴木さん: 鈴木さんの方が近い
        鈴木さん->>プリンター: 印刷物を取る
        鈴木さん->>佐藤さん: 印刷物を渡す

ここが、目に見える部分です。

図形

図形は初めに定義しています。

        actor 佐藤さん
        participant パソコン
        participant プリンター
        actor 鈴木さん

「actor」は人型、「participant」は四角で囲まれた図形です。
後ろに続く文字がそれぞれの名称で、人型の場合は図形の下、四角で囲まれたものは四角の中に文字が入ります。

並び順は定義順で決めることができます。

簡単にまとめるとこんな感じです。

記号	書き方	例
人型	actor
四角	participant

あと、処理のくくりをまとめることができます。

    par 機械処理
        パソコン->>プリンター: 印刷命令
        プリンター-->>プリンター: 印刷
    end

「par」に続けて、その処理のくくりの名前を記載します。
次行からはインデントして記載し、最後に「end」を記載します。

接続

あとはつないでいくだけです。

    鈴木さん->>佐藤さん: 印刷物を渡す

「接続元」に矢印記号を書き、接続先、あとは「:」に続けて接続先を記載します。

線の形状は記号で決まります。

線	書き方	例
実線（矢印なし）	->
点線（矢印なし）	–>
実線（矢印）	->>
点線（矢印）	–>>
実線（先が×）	-x
点線（先が×）	–x
実線（シャープな矢印）	-)
点線（シャープな矢印）	–)