Skip to content
/ uiflow Public
forked from hirokidaichi/uiflow

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

Notifications You must be signed in to change notification settings

kexi/uiflow

 
 

Repository files navigation

codecov

uiflow

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

UI Flowsとは?

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

simple.png

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

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

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

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

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

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

[その結果1]
結果

[その結果2]
結果

コマンドの使い方

シンプルな使い方

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

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

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をライブラリとして使う

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

const uiflow = require("@kexi/uiflow");

SEE ALSO

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 62.8%
  • JavaScript 37.2%