Mermaid記法 | シーケンス図を描く

Mermaid記法 | シーケンス図を描く

みなさんこんにちは!

今回は前回の内容に続いて、Mermaid記法を用いた「シーケンス図」の例を紹介します。

公式が公開しているドキュメントは以下からご覧いただけます。↓

シーケンス図とは?

シーケンス図とは、システムの概要・仕様・処理の流れを記載した図のことです。

オブジェクト指向のソフトウェア設計においては、グローバルスタンダードの設計手法と言っても過言ではありません。

シーケンス図を使うメリットは、以下のようなものがあります。

  • クラスやオブジェクト間のメッセージや相互作用を時系列で表すことができます
  • システムの動作や振る舞いを分かりやすく可視化できます
  • 設計時に不具合や問題点を発見しやすくなります
  • プログラミングやテストに役立ちます

サンプルを見てみる

前回の記事と同じくNotion環境でMermaid記法をプレビューします。

Alice と Bobの会話をシーケンス図に表すと、下図のようになります。

sequenceDiagram
	Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: Fine, thank you.

Mermaid記法として、以下のようにも記載できます。

sequenceDiagram
  Actor Alice
	Actor Bob  
	Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: Fine, thank you.

シーケンス図の書き方

シーケンス図では、「sequenceDiagram」というキーワードに続けてコードを記載します。

記載するにあたって必要な要素は以下の通りです。

  • 各参加者(アクター)
  • メッセージ(イベント)
  • ラベル
  • 矢印

これらをセミコロン;で区切りながら定義します。

アクター

participant :登場人物です。actorで定義すれば人型で表示されます。(省略も可能)

sequenceDiagram
	actor さとし
	actor たけし
	actor かおり

	さとし->>たけし:こんにちは!
	さとし->>かおり:こんにちは!
	かおり-->>さとし:こんにちは!

矢印の線種や終点のマークを定義することができます。

現在サポートされている矢印のタイプは 6 つあります。

タイプ説明
->矢印のない実線
–>矢印のない点線
->>矢印付きの実線
–>>矢印付きの点線
-x最後に十字がある実線
–x最後に十字がある点線。
-)最後に開いた矢印がある実線 (非同期)
–)最後に開いた矢印のある点線 (非同期)
sequenceDiagram
	actor さとし
	actor たけし
	
	さとし->>たけし:矢印
	さとし->たけし:実線
	さとし-->たけし:矢印なし点線	
	さとし--xたけし:終点がバツ印	

アクティベーション と ノート

アクティベーション:稼働(実行)している期間を描画します。

ノート:メモを記載することができます。表記場所のオプションは「over | left of | right of」です。

sequenceDiagram
	autonumber
	actor 作業者
	participant プリンタ
	
	作業者 ->>+プリンタ:印刷指示
	プリンタ -->>-作業者:印刷物出力
	Note left of プリンタ:印刷物

サンプル

以下はシーケンス図の例です。autonumberを使うことで、手順に番号を振ることができます。

sequenceDiagram
	autonumber

  actor A as 作業者
  participant B as 装置1
  participant C as 装置2
	
	A->>B:電源ON
	A->>C:電源ON
	loop 1時間に1回発生
	  A->>+B: 部品セット
	  B-->>B: 加工
	  B->>+C: 自動搬送
	  C-->>C: 加工
	  C-->>-B: 自動搬送
	  B-->>-A: 自動搬送
	end

まとめ

今回はシーケンス図の書き方について紹介しました。

この記事で紹介しきれていない内容も沢山あるため、興味があるかたは公式ドキュメントをご確認ください。

本日のAmazonおすすめ_Top10

2024-02-27 10:34:07時点