UI FlowはBasecamp(旧37 signals)が考えた画面遷移手法で、ユーザの見るもの/することという点に主眼を置いて描かれるのが特徴です。ムダを省いた作りなので、メンテナンスしやすく、かつ分かりやすいという利点があります。 とは言え、画面遷移図は徐々にメンテナンスされていかなくなるものです。原因としては、バイナリファイルなので編集しづらかったり、移動や結合、分割に工数がかかってしまうということがあります。そこで使ってみたいのがuiflowです。

uiflowの使い方

uiflowの例として、例えば以下のようなテキストファイルを作成します。Markdownに似せた記法となっています。

[最初に]
ユーザーが見るものを書きます。
--
ユーザーがする行動を書きます。

[次に]
ユーザーが見るもの
--
ユーザーがすること1
==> その結果1
ユーザーがすること2
==> その結果2

[その結果1]
結果

[その結果2]
結果

後はコマンドを実行するだけです。以下のコマンドはPNG画像を生成します。

uiflow -i myapp.txt -o myapp.png -f png  

さらにフォーマットとしてSVGも選べます。

uiflow -i myapp.txt -f svg

uiflowを使うことで、分かりやすいUI Flowがさらにメンテナンスしやすいものになります。テキストベースであれば、コピペも簡単に行えるので、フローをコピーしたり、別なフローに移動したりするのも簡単に行えるでしょう。

uiflowはnode.js/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

hirokidaichi/uiflow: uiflow - the simplest way to write down your ui-flow diagram like markdown