uiflow - the simplest way to write down your ui-flow diagram like markdown
Switch branches/tags
Nothing to show
Clone or download
Latest commit b3b666b Sep 5, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app fix hyphen problem. Jun 10, 2016
bin remove -w mode Mar 10, 2016
sample Using viz.js instead of exec child process Apr 8, 2016
.gitignore Initial commit Mar 3, 2016
README.md remove -w mode Mar 10, 2016
index.js Fix bug Apr 8, 2016
package.json fix width Apr 13, 2016

README.md

uiflow

マークダウン風のテキストからUI Flowsのグラフを生成するコンパイラ

UI Flowsとは?

Webサイトやスマホアプリなどのユーザーインタフェースを設計する際に、より簡単な表現で全体の流れを記述する次のような図のことです。

simple.png

具体的なUI設計に触れず、

  • ユーザーが見るもの
  • ユーザーがする行動

に注目することでシンプルにUIの必要条件、あるいは骨子を記述することができます。

uiflowコンパイラは、次のような簡潔な表現でこのような図を作図することができます。

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

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

[その結果1]
結果

[その結果2]
結果

インストール方法

グラフの生成にはGraphvizを用います。brewなどを通じてinstallしておいてください。

brew install graphviz
npm install -g uiflow

コマンドの使い方

シンプルな使い方

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

myapp.txtをpng形式で、myapp.pngに変換する。

svgで出力

uiflow -i myapp.txt -f svg

myapp.txtをsvg形式で、標準出力に表示する。

uiflow形式の文法

基本ブロック

[ページ名]
表示要素1
表示要素2
表示要素3
--
行動要素1
===> 遷移先ページ1名
行動要素2
===> 遷移先ページ2名

base.png

基本ブロックをつなげる

[ページ名]
表示要素1
--
行動要素1

[ページ名2]
表示要素
--
行動要素

[ページ名3]
表示要素
--
行動要素

行動要素の==>を省略すると次の基本ブロックに自動的につながります。

base.png

遷移に名前をつける

=={hogehoge}=>と表記して、遷移に名前をつけることができます。

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

[次に]
ユーザーが見るもの
--
ユーザーがすること1
=={遷移アクション名}=> その結果1
ユーザーがすること2
=={API名など}=> その結果2

[その結果1]
結果

[その結果2]
結果

simple-graph.png

少し複雑な例


[初回通知]
通知の確認ダイアログ
--
OK

[国選択]
リージョンの選択
デフォルトで日本
OKボタン
--
OK

[はじめよう]
ヒント情報
はじめるボタン
--
ヒントをスワイプ
==> はじめよう
LINEQを始める

[非ログインメイン画面]
ログインすると全ての機能を使えますアラート
フィード
通知アイコン
検索アイコン
ホーム
分野
Qボタン
ランキング
マイページ(N)
------
アラートをタップ
==> 利用規約
分野をタップ
==> 分野
Qボタンをタップ
==> ログイン確認
ランキングをタップ
==> ランキング


[利用規約]
利用規約の表示

[分野]
分野詳細

[ランキング]
ランキング詳細

base.png

uiflowをライブラリとして使う

次のように使うことができます。

var uiflow = require("uiflow");

// dot形式で書き出す
var dot = uiflow.compile("[テスト]\nユーザーが見るもの\nユーザがすること\n");

// パースされたAST表現をjsonで書き出す
var json = uiflow.json("[テスト]\nユーザーが見るもの\nユーザがすること\n");

// graphvizをつかって、svgに変換したものを標準出力に渡す。
uiflow.build("ソースコード","svg")
	.pipe(process.stdout);

SEE ALSO