これまでのあらすじ
intelliJ+graphvizを利用して図を書いていたのだが、
- intelliJでsample.dotファイルを編集
- intelliJでsample.dotファイルをsave
fdp -Tsvg sample.dot -o sample.svgopen sample.svg
とかやるのが面倒になった。 理想的には
でしょう。ということでなんとかしました。
イメージ
こうなってくれ
見て分かる通り、エディタはIntelliJに限らなくて良い
環境
- Mac High Sierra(10.13.6)
- ruby(2.5.1)
- graphviz(2.40.1)
- google chrome(69.0.3497.100)
端的に言ってどうなったのか
このようになった。（plantumlで guard-shell みたいなハイフンが使えないのってなんとかならないのか）
gyazo.com
まとめたリポジトリがこれ、使い方はREADMEにある。 github.com
実際にやったこと
rubyに guard というgemがあり、ファイルの変更を検知することができる。
なにか1
なにか1は.dotファイルの変更を検知し、.svgファイルを生成する必要がある。
guardは変更を検知するだけなので、shellの操作を行うために guard-shell を更に利用する。
Guardfileにこのように記述する。
def change_ext(filepath, ext) File.dirname(filepath) + '/' + File.basename(filepath, ".*") + '.' + ext end guard 'shell' do watch(/(.*).dot/) { |s| `fdp -Tsvg #{s[0]} -o #{change_ext(s[0], 'svg')}` } end
なにか2
なにか2は.svgファイルの更新を検知し、ビューアを更新する必要がある。 ビューアとしてgoogle chrome+livereloadを利用し、guard-livereloadと連携させることでこれを実現する。
まずはこのextensionをインストール chrome.google.com
guard-livereloadを利用し、先程のGuardfileにコードを付け足して以下のようにする github.com
def change_ext(filepath, ext) File.dirname(filepath) + '/' + File.basename(filepath, ".*") + '.' + ext end guard 'shell' do watch(/(.*).dot/) { |s| `fdp -Tsvg #{s[0]} -o #{change_ext(s[0], 'svg')}` } end guard 'livereload' do watch(/(.*).svg/) end
ところで、chromeで直接svgファイルを開くとlivereloadはreloadに反応してくれない。 そのため、htmlファイルからsvgを読むようにする。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="sample.svg"> </body> </html>
ここまでをやった後
