関連図を綺麗に書けるGraphvizというツールがマイブームです。マイブームと言うものの、大変昔からあるツールなのですが、実際使ってみたのがつい最近なのです。
DOT言語という言語で書いたスクリプトをコマンドラインで食わせると関連図が描画された画像ファイルを出力してくれるというものなのですが、いちいちコマンドを叩くというのも面倒なので、ファイルが更新されたら勝手に画像ファイルも更新してくれるようにして、遊びやすくしています。という訳でその方法をシェアします。
目次
用意するもの
- Graphviz
- Ruby（僕が使っているのはruby 2.0.0p247）
- Guard（guardとguard-shell）
Graphvizの用意の仕方
Macの方は以下のコマンド一発でインストールできます。
brew install graphviz
Mac以外の環境の方はこちらからダウンロードしてください。僕の環境がMacなので、基本的にMacの方向けの説明になります・・・ゴメンナサイ。
Rubyの用意の仕方
まだRubyを用意されていない方は以下の記事で大変分かりやすく手順が説明されています。
rbenvを使って3分でRubyをインストールする方法まとめ。
Guardの用意の仕方
Rubyがインストールされている状態で、以下のコマンドを入力して下さい。
gem install guard guard-shell
という訳で早速本題に
DOT言語で書かれたスクリプト、.dotファイルを更新すると勝手に画像ファイルが更新されるようにしていきます。
適当なディレクトリを作ります
作業用のディレクトリを切って下さい。
# こんな感じで mkdir ~/dev/sandox/dot
Guardfileを作ります
以下の内容をGuardfileという名前で保存します。
guard 'shell' do
watch(/(.*).dot/){|s| `dot -Tpng #{s[0]} -o #{s[0]}.png`}
end
.dotファイルが更新されたらこんなコマンドを実行するぜ、という内容です。お手軽です。
Guardによるファイル監視を実行します
作業用のディレクトリ内にGuardfileがある状態で以下のコマンドを実行します。
guard -i
すると以下のようなメッセージが表示されて、待機状態になります。
15:47:20 - INFO - Guard is using TerminalTitle to send notifications. 15:47:20 - INFO - Guard is now watching at '/Users/mah_lab/dev/workspace/dot'
準備完了です。ファイルを更新しましょう。
LightTableで.dotファイルとブラウザを表示します
プレビューとなる画像を見ながら更新するなら、LightTableというテキストエディタが便利です。今年最高に流行るテキストエディタだと勝手に思っています。
LightTableではタブとしてブラウザビューを開いておいて、ブラウザで開いているファイルが更新されたらそれをすぐ横のペインで見る、なんてことができます。この機能をConnectionと呼ぶのですが、ブラウザの他にもClojureスクリプトやnode.jsに食わせるJavaScriptをリアルタイムで評価するConnectionを作れたりと、これからもこのConnectionの種類が増えるのかと思うと胸がいっぱいになります。取り急ぎはファイルを更新したら勝手にブラウザの情報もLiveReloadやLivePreview的に書き換わってくれたら良いなと思います。
ただ、まだ勝手にブラウザを更新してくれる機能はなさそうなので、Cmd + Sで保存後に、Cmd + Rでブラウザが更新されます。これで更新される画像ファイルを見つつ、.dotファイルを書くことができます。めでたしめでたしです。
Graphvizでまともな図を書きたい人向けには
こんな記事をご覧になるとよろしいのではないでしょうか。
直観を超えた何かが組み上がることを目指して→考える道具としてのdot言語 / Graphviz
いやー、LightTableは本当に良いエディタですね。それはまた明日お会いしましょう。
