マウスなしで図が描ける!blockdiagに惚れました

(追記) s/Blockdiag/blockdiag/g だそうです(参考)。失礼しました。


日曜の昼間にTwitterを眺めていたら、次の資料が流れていきました。

blockdiagという図(ダイアグラム)を描画するツールの紹介です。

資料をざっと読んだところ、このツールは自分が求めている作図ツールにとても近いと感じたので、インストールして試してみました。

その結果、これを使えば、「マウスを使わずに図を描きたい」という長年の希望が叶うことが分かりました。ヤッター!

仕事でも趣味でも、個人作業で図を描くときに、しばらく使ってみます。


気に入ったところ

  • XML以外の手段で、図の論理構造を宣言的に記述できる
    • XMLが人間にとって最も可読性の高い書式かというと、そうではないと自分は感じます
  • 描画をツールにまかせることで、人間様は本来の仕事に集中できる
    • 矢印をまっすぐ引いたり、1px単位で箱をそろえたり、といった理不尽な作業から解放されます
    • マウスを使った繊細な作業が不要に
      • 目の疲れと肩こりが減るかも
      • ThinkPadだけで十分にきれいな図が描けるのは大きい
  • プレーンなテキストファイルのため、バージョン管理と相性が良いハズ

ざっと思いつくのは、こんなところです。

試した環境

参考資料

インストール

Fedora 15(サーバ構成)の場合、Pythonは最初から入っていますが、easy_installは入っていません。

easy_installはsetuptoolsに含まれているらしいので、ドキュメント(http://blockdiag.com/blockdiag-ja/build/html/introduction.html)のCentOSの項を参考に、周辺ツールをインストールします。

$ sudo yum install python-setuptools python-imaging fonts-japanese
...(略)
Installing:
 japanese-bitmap-fonts     noarch     0.20080710-10.fc15       fedora      21 M
 python-imaging            x86_64     1.1.7-3.fc15             fedora     403 k
 python-setuptools         noarch     0.6.14-7.fc15            fedora     318 k

Python 2.7なので、こんな感じに。

$ sudo touch /usr/lib/python2.7/site-packages/PIL-1.1.5.egg-info

この「1.1.5」ってリテラルは何? どう変えるの? と思いつつ、横着して調べていませんが*1、インストールは完了しました。

やっとeasy_installが使えるので、blockdiagをインストールします。

$ sudo easy_install blockdiag
install_dir /usr/lib/python2.7/site-packages/
Searching for blockdiag
Reading http://pypi.python.org/simple/blockdiag/
Reading http://tk0miya.bitbucket.org/blockdiag/build/html/index.html
Best match: blockdiag 0.8.1
Downloading http://pypi.python.org/packages/source/b/blockdiag/blockdiag-0.8.1.tar.gz#md5=924006af99488b2ec6634f5082b0f9a3
Processing blockdiag-0.8.1.tar.gz
Running blockdiag-0.8.1/setup.py -q bdist_egg --dist-dir /tmp/easy_install-MuRoDI/blockdiag-0.8.1/egg-dist-tmp-aZ5FOC
zip_safe flag not set; analyzing archive contents...
blockdiag.tests.test_generate_diagram: module references __file__
blockdiag.tests.test_builder: module references __file__
blockdiag.tests.test_pep8: module references __file__
blockdiag.tests.test_builder_separate: module references __file__
blockdiag.tests.test_builder_errors: module references __file__
Adding blockdiag 0.8.1 to easy-install.pth file
Installing blockdiag script to /usr/bin

Installed /usr/lib/python2.7/site-packages/blockdiag-0.8.1-py2.7.egg
Processing dependencies for blockdiag
Searching for funcparserlib
Reading http://pypi.python.org/simple/funcparserlib/
Reading http://code.google.com/p/funcparserlib/
Best match: funcparserlib 0.3.5
Downloading http://pypi.python.org/packages/source/f/funcparserlib/funcparserlib-0.3.5.tar.gz#md5=52dfec49f2d2c4d816fe8d8c90f7dcf1
Processing funcparserlib-0.3.5.tar.gz
Running funcparserlib-0.3.5/setup.py -q bdist_egg --dist-dir /tmp/easy_install-ditc8Q/funcparserlib-0.3.5/egg-dist-tmp-aJRWVO
warning: no files found matching '*' under directory 'tests'
zip_safe flag not set; analyzing archive contents...
Adding funcparserlib 0.3.5 to easy-install.pth file

Installed /usr/lib/python2.7/site-packages/funcparserlib-0.3.5-py2.7.egg
Finished processing dependencies for blockdiag

warning出てるヨ。大丈夫なの? と思いつつ、横着して調べていませんが*2、インストールは完了しました。

使ってみる

リポジトリから直接取ってくればexamplesがあるのでしょうが、見当たらないので作ります。

$ touch simple.diag
$ vi simple.diag

diagram {
   A -> B -> C -> D;
   A -> E -> F -> G;
}

ドキュメント(http://blockdiag.com/blockdiag-ja/build/html/examples.html)の「シンプルなブロック図」として示されている内容を、simple.diagにコピーアンドペースト

保存して変換します。

$ blockdiag simple.diag

エラーが出ずに変換できたら、同じディレクトリにsimple.pngが生成されています。表示して確認します。

というわけで、問題なく動作することが分かったので、サンプルを見ながら遊びました。

$ vi study.diag

diagram {
 A [label = "仕事をする"];
 B [label = "遊ぶ"];
 C [label = "試してみる"];

 A [numbered = 0];
 B [numbered = 1];
 C [numbered = 2];

 A -> B [label = "search"];
 B -> C [label = "take"];
 C -> A;
}

先ほどと同じコマンドで変換しようとしたら、エラーになりました。

変換時に日本語フォントを指定すればよいようなので、IPAフォントを選んでおきます。

$ blockdiag -f /usr/share/fonts/ipa-gothic/ipag.ttf study.diag

これで、先ほどの画像が作成できました。

ディ・モールト 素晴らしい!

ノードのラベルの文字数が、もうちょい入るようになればいいなー。

*1:椅子蹴られる

*2:椅子蹴られる