ひとりマーメイド12日目
状態遷移図2
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事では状態遷移図の記述について紹介します！
↓↓前回の記事はこちら
まーめいど！じょうたいせんい！
前回の記事では状態遷移図の見方と基本的な記法を紹介しました！
引き続き状態遷移図の記法を見ていきます！
分岐
分岐ノードの宣言には<<choice>>を使用します。
state STATE_ID <<choice>>
stateDiagram-v2
state if <<choice>>
状態遷移の分岐
分岐ノードにテキストを挿入することはできません。
stateDiagram-v2
state if <<choice>>
[*] --> if
if --> s1: n >= 0
if --> s2: n < 0
s1 --> [*]
s2 --> [*]
並列プロセス
<<fork>>, <<join>>を用いて並列プロセスを定義することができます。
記述中ではforkポイントとjoinポイントを定義し、通常の状態ノードと同様に扱います。
state FORK_STATE <<fork>>
state JOIN_STATE <<join>>
stateDiagram-v2
state fork_point <<fork>>
state join_point <<join>>
[*] --> fork_point
fork_point --> s1
fork_point --> s2
s1 --> join_point
s2 --> join_point
join_point --> [*]
forkポイントとjoinポイントを複数定義することで多重並列プロセスの記述も可能です。
stateDiagram-v2
state fork_point1 <<fork>>
state join_point1 <<join>>
state fork_point2 <<fork>>
state join_point2 <<join>>
state fork_point3 <<fork>>
state join_point3 <<join>>
[*] --> fork_point1
fork_point1 --> fork_point2
fork_point2 --> s1
fork_point2 --> s2
s1 --> join_point2
s2 --> join_point2
join_point2 --> join_point1
fork_point1 --> fork_point3
fork_point3 --> s3
fork_point3 --> s4
s3 --> join_point3
s4 --> join_point3
join_point3 --> join_point1
join_point1 --> [*]
並行プロセス
並行プロセスを定義することができます。
複合状態の中で--を用いて記述を区切ります。
stateDiagram-v2
[*] --> Process
state Process {
[*] --> s1
s1 --> [*]
--
[*] --> s2
s2 --> [*]
--
[*] --> s3
s3 --> [*]
}
ノート
状態ノードの左または右にノートを配置して説明文を挿入することができます。
| POSITION | 配置 |
|---|---|
| left | 左 |
| right | 右 |
ノートの定義には2種類の記法があります。
note POSITION of STATE_ID
NOTE_TEXT
end note
note POSITION of STATE_ID: NOTE_TEXT
s1には記法1, s2には記法2を適用します。
stateDiagram-v2
s1
s2
note left of s1
This is the note.
end note
note right of s2 : This is the note.
単独の状態ノードに対しては左右に正しくノートが配置されますが、状態に遷移を付与するとレンダラーは左右を見失います。
stateDiagram-v2
s1 --> s2
note left of s1: This is the note.
note right of s2 : This is the note.
挿入位置の指定が意味をなしていません。そのうち改善されると思うので気にせず使いましょう。
ダイアグラムの向き
directionでダイアグラムの向きを指定することができます。
direction TB(またはdirection TD)で上から下へのグラフになります。
stateDiagram-v2
direction TB
s1 --> s2
direction LRで左から右へのグラフになります。
stateDiagram-v2
direction LR
s1 --> s2
以下のように自由自在に向きを変更することができます。
| 記述 | 向き |
|---|---|
| TB | ↓ |
| TD | ↓ |
| BT | ↑ |
| LR | → |
| RL | ← |
スタイリング
※cssDefによる状態遷移図のスタイリングはマーメイドver.9.3.0以降でレンダリング可能です。
ダイアグラムをスタイリングすることができます。基本的な概念はHTML/cssと同様です。
クラスの宣言
cssDefによりクラスを定義します。同一クラス内のスタイル定義は全て1行で記述する必要があります。すごく読みづらいですが、改行するとエラーを吐きます。
cssDef CLASS_NAME fill:#fff, color:#333,...
主なstyleパラメータは以下の通りです。
| fill | ノードの背景色 |
| stroke | ノードの縁の色 |
| stroke-width | ノードの縁の太さ |
| color | 文字の色 |
| stroke-dasharray | 縁の点線の長さの割合 |
スタイルの適用
スタイルの適用には2種類の記法があります。
class STATE_ID CLASS_NAME
stateDiagram
direction LR
[*] --> s1
s1 --> s2
s2 --> [*]
classDef style_s1 fill:#00FF00, color:black, stroke:#FF22FF, stroke-width:10px,
classDef style_s2 fill:#f00, stroke:#fff,stroke-width:4px, color:yellow, stroke-dasharray:6 4
class s1 style_s1
class s2 style_s2
STATE_ID::: CLASS_NAME
stateDiagram
direction LR
[*] --> s1::: style_s1
s1 --> s2::: style_s2
s2 --> [*]
classDef style_s1 fill:#00FF00, color:black, stroke:#FF22FF, stroke-width:10px,
classDef style_s2 fill:#f00, stroke:#fff,stroke-width:4px, color:yellow, stroke-dasharray:6 4
まとめ
状態遷移図の記法を紹介しました。
↓↓次回の記事はこちら！！
参考