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

2023.02.24
開発系

みなさんこんにちは！

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

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

mermaid.js.org

Sequence diagrams | Mermaid

https://mermaid.js.org/syntax/sequenceDiagram.html

Create diagrams and visualizations using text and code.

1. シーケンス図とは？
2. サンプルを見てみる
3. シーケンス図の書き方
4. アクター
5. 線
6. アクティベーションとノート
7. サンプル
8. まとめ

シーケンス図とは？

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

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

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

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

サンプルを見てみる

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

魅せるIT編集部

2023.02.24

Mermaid記法 | フローチャートを描く

https://miseruit.com/2023/02/24/post-4281

みなさん、こんにちは！今回は Mermaid記法で「フローチャート」を書くための記法を確認していきます。公式ドキュメントはこちらから確認できます。はじめに　～マークダウン記法とMeraid記法～マークダウン記法は、テキストエディタで簡単に文書を作成するための記法です。見出しやリスト、リンクなどの基本的な要素だけでなく、画像や表も挿入できます。しかし、複雑な図形やグラフをマークダウン記法で表現するのは難しいです。そこで登場したのが「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 装置１
  participant C as 装置２
	
	A->>B:電源ON
	A->>C:電源ON
	loop 1時間に1回発生
	  A->>+B: 部品セット
	  B-->>B: 加工
	  B->>+C: 自動搬送
	  C-->>C: 加工
	  C-->>-B: 自動搬送
	  B-->>-A: 自動搬送
	end