Yak shaving logs


My life is just yak shaving.

uiflowを使ってみた

2016/05/13 #sitemap #uiflow

By Yusuke Takita


こんにちは。Kajitz inc.の瀧田です。

勉強も兼ねてこの前書いたアイディアのサイトマップを前々から気になったuiflowを利用して作ってみようと思います。

uiflow?

もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った

インストール

インストール方法
グラフの生成にはGraphvizを用います。

brewなどを通じてinstallしておいてください。

brew install graphviz

npm install -g uiflow

@see https://github.com/hirokidaichi/uiflow

インストール方法はREADMEに書いてあります。

npmをインストールしていない場合は、以下のコマンドでnpmをインストール後に上記のREADME通りにすれば、セットアップ完了です。



npmはnodeに内包されているので、以下の通りにすれば上記のnpm install ~をたたけるようになります。

  • node / npm をインストールする
    brew install node

インストールできたかどうかは、以下で確認しました。

npm --version

3.8.6

使い方

もうインストールできたら使い方は迷いません。

ディレクトリはお好きにどうぞ。

  1. mkdir content(uiflow直下)
  2. vim koreyome-com.txt
  3. 何か書く
  4. uiflow -i koreyome-com.txt -o koreyome.png -f png
  5. uiflow直下にkoreyome.pngができる

こんな感じになります。(READMEの説明をコピーしました。)

もう夜遅いから明日フロー書きます。

https://gyazo.com/5bedd4090b3d3b74b88d589ad9472f0a


追記: 過去ブログを移行しました。

このエントリーをはてなブックマークに追加

categories


最新記事


tags