日々のつれづれ

不惑をむかえ戸惑いを隠せない男性の独り言

UMLを練習する、アクティビティー図-5

アクティビティー

私には、手順の記述方法でなじみがある図。
何かの操作手順を伝えるとき、行動を単位として、それを順番につなげる。
料理のレシピをイメージするとわかりやすい。

ただ、UMLにはステート図ってのがあって、アクティビティー図と似ている。(少なくとも私には難しかった)
区別としては、行動を単位に流れを描く方がアクティビティー図で、状態の変化を単位に描くのがステート図ってことで、扱う業態や業種で使い分けがあるんだろうな、って印象です。
まぁ、actibvity と state の意味そのままなんですが…

料理のレシピを考える

アクティビティー図は行動をつなぐので、料理のレシピと相性が良いと思う。そこで、ホットケーキレシピを例に作ってみた。

前回まで

味の素さんのHPから引用した。
行動を描き分けて、より具体的に記述した。

並列処理と同期処理を加えて、手際の良いレシピになった感じ。

でも、もっときれいになる。してみる。

条件分岐とループ

焼き始めたら、ただ行動する、ってことはなく、焼き加減を見ながらの調理になる。この状況判断は条件分岐になる。
で、分岐の矢印に状態を書き入れたいときは、矢印の終点と結合のあいだに "[...]" とブラケットで囲った文字を入れる。これは条件分岐だけでなく、すべての矢印に有効です。

if 条件 then
  --> [コメント]行動A
else
  --> [コメント]行動B
endif

って構文。行動Aと行動BはどちらがYesでもいい。ただ、条件分岐は直前の行動と結合するので、ifを続けるときはどちらに結合したいか注意する。そして、条件分岐でループ処理になるときは、元の状態に結合すればいい。
で、条件分岐の条件はダイヤモンドの右上か左上に出る。ダイヤモンドの中じゃない。矢印のコメントと位置が近いので混乱する。

@startuml
title ホットケーキレシピに条件分岐を入れたら
(*) ---> ボウルにAをふるい入れる
ボウルにAをふるい入れる --> 泡立て器で混ぜる
泡立て器で混ぜる --> ===a===
(*) --> 別のボウルに卵を割りほぐす
別のボウルに卵を割りほぐす --> 別のボウルに牛乳を加える
別のボウルに牛乳を加える --> 卵と牛乳を混ぜる
卵と牛乳を混ぜる --> ===a===
===a=== --> 混ぜ合わせた卵と牛乳をAに加える
混ぜ合わせた卵と牛乳をAに加える --> 泡立て器で粉っぽさがなくなるまで混ぜる
泡立て器で粉っぽさがなくなるまで混ぜる --> 生地を作る
生地を作る --> 生地をおたま1杯とる
(*) ----> キッチンペーパーに油を染み込ませる
キッチンペーパーに油を染み込ませる --> フライパンに油を塗る
フライパンに油を塗る --> フライパンを熱する
フライパンを熱する --> ===b===
(*) -----> ふきんを濡らし置く
ふきんを濡らし置く --> ===b===
===b=== --> ぬれたふきんの上にフライパンを置いて熱を取る
ぬれたふきんの上にフライパンを置いて熱を取る --> 再び弱火にかける
再び弱火にかける --> "生地を上からフライパンにの中心に落とす\n(こうすると丸い形になる)"
生地をおたま1杯とる --> "生地を上からフライパンにの中心に落とす\n(こうすると丸い形になる)"
"生地を上からフライパンにの中心に落とす\n(こうすると丸い形になる)" --> 表面を見る
[3分間]if "プツプツと穴がでる" then
  -> [No]さらに待つ
  --> 表面を見る
else
  --> [Yes]生地を裏返す
endif
生地を裏返す --> [2分間] 取り出す
取り出す --> ホットケーキを器に盛る
if 焼き終わった then
  -up->[No]生地をおたま1杯とる
else 
  -->[Yes]お好みでバターとメープルシロップをかける
endif
お好みでバターとメープルシロップをかける --> (*)
@enduml

f:id:myopomme:20190706235537p:plain

こんな感じ。
plantUMLは自動で配置が換わる。分岐が増えたり、複雑な図になると、思ったように配置してくれない。
配置を指定する方法があるか、調べてみよう。

とはいえ、 こんな感じで、plantUMLのアクティビティー図を使うと、簡単に手順を図示できる。
エクセルやパワーポイントで使った時間はなんだったの?ってくらい簡単。