uiflow - Markdown風の記法でUI Flowを記述
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