コード で シーケンス図 を 描く ～mermaid で シーケンス図 を 描く～ mermaid 記法

目的

• mermaidでシーケンス図を描く時のルールを描く
  ※mermaid.jsの公式に記載されているフローチャートを書く方法を紹介する。
  ※mermaidについて知りたい方はこちら
  ※基本的な記入方法を知りたい方はこちら
  ※出力方法を知りたい方はこちら
  

押さえるポイント

• シーケンス図の場合はsequenceDiagramと宣言する。
• 最初に定義したプロセスがどのように作用するかを記載する。

書き方の例

プロセスの定義

• プロセスの定義はpraticipant "プロセス名"とする。
• シーケンス図の左側に描きたいプロセスを先に記載する。
• 説明したい内容に登場するプロセス(登場人物やシステム、ハードウエアなど)を最初に定義する。

• 架空の人物、「太郎」と「花子」の相互作用を表すときは下記の様に記載する。
  ※ちなみに簡単な図ならプロセスを定義しなくてもシーケンス図は描くことができるが、図に汎用性を持たせるためにはプロセスを定義することをおすすめする。

  sequenceDiagram
      participant 太郎
      participant 花子
  

プロセス名を変数に格納

• プロセス名は変数に格納する事ができる。
• この考え方を利用することにより相互作用を描くときに毎回プロセス名を記載する必要がなくなり楽である。

• 前述の内容で紹介した「太郎」と「花子」をそれぞれ「NAME_A」と「NAME_B」に格納するときは下記の様に記載する。

  sequenceDiagram
      participant NAME_A as 太郎
      participant NAME_B as 花子
  

  

相互作用のアロー(作用を表す矢印)の描き方

• プロセスAからプロセスBへの矢印はA->>Bと記載する。
• 矢印の上にテキストを出すときはA->>B: テキストと記載する。
• 前述の内容を踏まえた上で「太郎」と「花子」の関係を記載を下記に記載する。

スペルミス確認

``` mermaid
sequenceDiagram
    participant NAME_A as 太郎
    participant NAME_B as 花子
    NAME_A->>NAME_B: 好き
    NAME_B->>NAME_A: ちょっと好き
```

相互作用のアローの種類

アクティベーション

• アウターをアクティブ化、非アクティブ化することができる。

• 専用の宣言方法がある。

  sequenceDiagram
      participant NAME_A as 太郎
      participant NAME_B as 花子
      NAME_A->>NAME_B: 好き
      activate NAME_A
      NAME_B->>NAME_A: ちょっと好き
      deactivate NAME_A
  

プロセスの横にノートを表示する。

• シーケンス図にメモを追加することができる。
• シーケンス図の横に付箋みたいな感じでテキストを書くことができる。

• コードの例を下記に記載する。

  sequenceDiagram
      participant NAME_A as 太郎
      Note 左右どちらにノートを作るか of プロセス名: ノートに記載する内容
  

• より具体的な例を下記に記載する

  sequenceDiagram
      participant NAME_A as 太郎
      Note right of NAME_A: 太郎は寒がりです
  

  

複数のプロセスに跨るノートを表示する。

• シーケンス図の複数プロセスに跨るノートを追加することができる。

• コードの例を下記に記載する。

  # 図の指定
  sequenceDiagram
      # プロセスの定義
      participant NAME_A as 太郎
      participant NAME_B as 花子
      # ノートの指定(ノートが跨るプロセス名をカンマで区切って記載)
      Note over プロセス名,プロセス名: ノートに記載する内容
  

• より具体的な例を下記に記載する。

  sequenceDiagram
      participant NAME_A as 太郎
      participant NAME_B as 花子
      Note over NAME_A,NAME_B: 二人は仲が良い
  

ループ

• ループ処理を表現することができる。

• コードの例を下記に記載する。

  # 図の指定
  sequenceDiagram
      # プロセスの定義
      participant NAME_A as 太郎
      participant NAME_B as 花子
      # ループの記載
      loop ループ処理内に表示したいテキスト
      # ループ内の処理
          ループしたい処理をアローなどで記載する
      end
  

• より具体的な例を下記に記載する。

  sequenceDiagram
      participant NAME_A as 太郎
      participant NAME_B as 花子
      loop 毎分
          NAME_A->>NAME_B: 見る
          NAME_B->>NAME_A: 話しかける
      end