goemonを使ってblockdiagを書いてみたら快適だった

そこそこちゃんとしたドキュメントを書くときは

を使うけど、
図だけライブプレビューしながら書くには大げさすぎるのでgoemonを使ってみた。

まずはこの記事を参考にmarkdownのライブリロード環境を構築。
ただcssは無くても良かったのでhtmlテンプレートに追加したのはlivereload.jsのみ。

pandoc -D html | sed '/<\/head>/i\  <script src="http://localhost:35730/livereload.js"></script>' > template.html

あとはgoemon.ymlにblockdiagを追加して

tasks:
- match: '*.md'
  commands:
  - pandoc -f markdown -t html --template=template.html -o ${GOEMON_TARGET_DIR}/${GOEMON_TARGET_NAME}.html ${GOEMON_TARGET_FILE}
  - :livereload /
- match: '*.diag'
  commands:
  - blockdiag -Tsvg -o ${GOEMON_TARGET_DIR}/${GOEMON_TARGET_NAME}.svg ${GOEMON_TARGET_FILE}
  - :livereload /

goemonを起動したら

goemon python -m SimpleHTTPServer

こんな感じのmarkdownを作って

![](blockdiag.svg)

blockdiag.diagを書いていくだけ。

Sphinxに比べるとファイルを保存してからブラウザに反映されるまでが速い！
とりあえずでやってみたものの、こんなに快適に書けるとは思ってなかった...

複数のblockdiagシリーズを同時に使うときのことはあんまり考えてなかったけど
ファイルの拡張子で実行するコマンドを分ければなんとかなりそう。

- match: '*.diag'
  commands:
  - blockdiag -Tsvg -o ${GOEMON_TARGET_DIR}/${GOEMON_TARGET_NAME}.svg ${GOEMON_TARGET_FILE}
  - :livereload /
- match: '*.seqdiag'
  commands:
  - seqdiag -Tsvg -o ${GOEMON_TARGET_DIR}/${GOEMON_TARGET_NAME}.svg ${GOEMON_TARGET_FILE}
  - :livereload /

これをやる前に

Shibaを改造してPRするか
指定パスの.diagを全て監視してimg一覧画面を生成するツールを作るか

考えてもみたけど今のところそこまで汎用的なのは必要ないかなぁという感じ。
初期設定が楽になってもパフォーマンスは落ちそうだし...

と、ここまで書いてdiagram-autobuildがあるということを知った。

blog.amedama.jp

1ファイルしか指定できないけど書きたい図が1つだけの時はこれで良さそう。
手元の環境だとgoemonに比べてワンテンポくらい遅かったけど...