guiflowの描画ライブラリを探る

未分類

久しぶりにandroidアプリを開発しています。 技術的な調査が終わって、次はUI設計のフェーズです。 UI設計で私がよく使うのがUIフロー図です。

こんなやつ 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール この図をテキストから作ってくれるのがguiflow。 electronで作られてる。 見た感じ、graphvizとかplantumlとかと同じ仕組みっぽい気がするけど、実際どうやって作られてるか知りたくなったので調べて見た。

guiflowのソースコードへ

ソースはgithubに公開されてる。 どんなライブラリが使われてるかを確認するためにpackage.jsonのdependenciesを見る。

"dependencies": {
  "dialogs": "^1.1.12",
  "electron-debug": "^0.5.2",
  "electron-windows-installer": "^1.2.5",
  "flumine": "^0.1.8",
  "sprintf": "^0.1.5",
  "through2": "^2.0.1",
  "uiflow": "^1.1.1"
}

描画のコアはuiflowってライブラリっぽい。 package.jsonで依存してるライブラリはnpmで探せるので、そこで"uiflow"を検索。ヒットしたライブラリからuiflowのソースコードへ

uiflowのソース

ソースはこれです。 作者はguiflowと同じ方。 ちゃんとモジュールを外出ししてくれてるってことですね。 ありがたい。 さっそくpackage.jsonで依存を見る。

"dependencies": {
  "option-parser": "^0.1.3",
  "spawn-stream": "^1.0.2",
  "stream-from-promise": "^1.0.0",
  "string-to-stream": "^1.0.1",
  "through2": "^2.0.1",
  "viz.js": "^1.3.0"
}

viz.jsがgraphvizっぽくて怪しすぎる。 npmでviz.jsを探す。

viz.jsキタ

リンク

ビンゴ！graphvizのライブラリ！ これ使えば自由に図がかけるっぽい。 今度使ってみよう。

以上、朝のネットサーフィンでした。