Category: software design – sequence diagram

mermaid.js シーケンス図のif文

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1 : ID
			app ->> app : 存在をチェック

			alt 該当なし
				app ->> screen: Topにリダイレクト
			else　該当者
				app　->> app: 情報セット
			end

	</div>

なるほどー。画面遷移図とは異なり、画面処理を入れられるから、いいかも。

ちなみにaltとはalternativeの意味。
htmlのaltと勘違いしていた。。

シーケンス図を書いていく

<!Doctype html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant screen as 画面

			screen ->>+ app : 1:ID

	</div>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
	<script>
		mermaid.initialize({
			startOnLoad:true
		});
	</script>
</body>
</html>

表現が足らんぞ。
ドキュメントを見ます
https://mermaidjs.github.io/sequenceDiagram.html

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1:ID

	</div>

おおおおおおおおお、ええやんけ。これ、実践で使いたい。

mermaidでシーケンス図

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="mermaid">
      sequenceDiagram
        A ->> B :要求
        B -->> A: 返答
    </div>
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({
        startOnLoad:true
      });
    </script>
</body>
</html>

よくできてんなー