Calendar

December 2010
M T W T F S S
« Nov   Jan »
 12345
6789101112
13141516171819
20212223242526
2728293031  

blockdiag でいろいろ書いてみる


(改訂履歴)

  • 2010/12/26: ver.0.5.5 で中の人に色々と要望を対応して頂けたので、記事の内容もそれに合わせて修正しました。
  • 2010/12/28: '-f'オプション、'--antialias'オプションの記述を追加。画像も –antialiasで生成したファイルに差し替えました。

はじめに

日頃から Graphviz でグラフを作成していましたが、唯一、直角線で描画してくれないのが不満でした。

blockdiag も Graphviz と同様にグラフを作成するツールですが、ノード間を直角線で描いてくれます。

(Webサイト)
http://tk0miya.bitbucket.org/blockdiag/build/html/index.html

(紹介スライド)
http://www.slideshare.net/TakeshiKomiya/blodkdiag-python-workshop-201012

上記のスライドによると、元々は画面遷移図の作成のために作成されたようです。
ですので、ここでは遷移図以外の用途について、自分が常々 Graphviz では難しいと感じていたグラフを blockdiag で作成してみます。

準備

Ubuntu10.10 を例にセットアップ手順を説明します。 パッケージは用意されていないので easy_install でインストールします。

easy_install を使うために python-setuptools をインストールします。

$ sudo apt-get install python-setuptools


次に blockdiag 本体をインストールします。

$ sudo easy_install blockdiag

  • アップグレードするときは、次のようにします。
    $ sudo easy_install -U blockdiag
    



IPAフォントが入ってない場合はフォントもインストールします。

$ sudo apt-get install ttf-ipafont

プラットフォーム毎に使用するフォントは次のようになっています。

(blockdiag.py より引用)

    fonts = [options.font,
             'c:/windows/fonts/VL-Gothic-Regular.ttf',  # for Windows
             'c:/windows/fonts/msmincho.ttf',  # for Windows
             '/usr/share/fonts/truetype/ipafont/ipagp.ttf',  # for Debian
             '/usr/local/share/font-ipa/ipagp.otf',  # for FreeBSD
             '/System/Library/Fonts/AppleGothic.ttf']  # for MaxOS

使用する環境に合わせてフォントを用意して下さい。

上記に該当するフォントがない場合、 -f オプションでフォントファイルを指定出来ます。

(Webサイト – File Configuration より引用)

$ blockdiag -f /usr/share/fonts/truetype/ttf-dejavu/DejaVuSerif.ttf simple.diag

いろいろ書いてみる

設計部品表(E-BOM)

まずは、設計部品表を書いてみます。

(Wikipedia – 部品表)
http://ja.wikipedia.org/wiki/BOM_(部品表)


次のようなスクリプトを作成しました。 Graphviz の dotスクリプトと似ていますが、微妙にキーワードが違ったりします。 両者は良く似ているので dotスクリプトが分かればすぐに書けると思います。

diagram{
	system [label="パソコン一式"];
	monitor [label="液晶モニタ"];
	pc [label="本体"];
	keyboard [label="キーボード"];
	mouse [label="マウス"];

	case [label="筐体"];
	power [label="電源\n(400W)"];
	memory [label="メモリー\n(2GB x 2)"];
	cpu [label="CPU\n(With FAN)"];
	board [label="M/B"];
	dvd [label="DVDドライブ"];
	hdd [label="ハードディスク\n(1TB)"];
	speaker [label="スピーカー"];

	group{
		color=lightgreen;
		pc; case; power; memory; cpu; board; dvd; hdd; speaker;
	}

	system -- monitor;
	system -- keyboard;
	system -- mouse;

	system -- pc;
		pc -- case;
		pc -- power;
		pc -- memory;
		pc -- cpu;
		pc -- board;
		pc -- dvd;
		pc -- hdd;
		pc -- speaker;
}

(補足)

  1. 改行する時は '\n' を挿入します。

  2. '--' で無向グラフ(矢印なしの線) になります。
    有効グラフ(矢印あり)の場合、'->', '<-', '<->' が使えます。


次のようにスクリプトから画像を作成します。

$ blockdiag  bom.txt


'--antialias'オプションを付けると、文字のギザギザがなくなり綺麗になります。

$ blockdiag  --antialias  bom.txt



成功すると bom.png という画像ファイルが作成されます。

(補足)

出力画像はデフォルトで PNG形式です。

-T オプションでSVG も指定出来ますが、それ以外の画像形式が欲しい場合は変換が必要です。

ImageMagick の convertコマンドを使えば、コマンドラインからお手軽に変換出来ます。

(convertコマンドで画像変換)

$convert  bom.png  bom.jpg


Graphviz と比べる

同じ内容を Graphviz でグラフ化するとこうなります。



… 大半の人は、 blockdiag の出力を好むと思います。

使用した dotファイルはこちらです。 (blockdiag のスクリプトとは微妙に異なっています)

bom.dot

組織図

次に組織図を書いてみます。これも Graphviz では見栄えの問題で適用出来ませんでした。

こちらの組織図を参考にさせて頂きました。

(海上自衛隊)
http://www.mod.go.jp/msdf/sf/about/organization.html

スクリプトはこれです。

diagram{
	top [label="自衛艦隊"];
	escort [label="護衛艦隊"];
	escort1 [label="第1護衛隊群 (横須賀)"];
	escort2 [label="第2護衛隊群 (佐世保)"];
	escort3 [label="第3護衛隊群 (舞鶴)"];
	escort4 [label="第4護衛隊群 (呉)"];

	air [label="航空集団"];
	air1 [label="第1航空群 (鹿屋)"];
	air2 [label="第2航空群 (八戸)"];
	air3 [label="第4航空群 (厚木)"];
	air4 [label="第5航空群 (那覇)"];	

	submarine [label="潜水艦隊"];
	submarine1 [label="第1潜水隊群 (呉)"];
	submarine2 [label="第2潜水隊群 (横須賀)"];

	fare [label="掃海隊群 (横須賀)"];

	group{
		color=khaki;
		escort; escort1; escort2; escort3; escort4;
	};
	group{
		color = lightgreen;
		air; air1; air2; air3; air4;
	};
	group{
		color = aquamarine;
		submarine; submarine1; submarine2;
	}

	top -- escort;
		escort -- escort1;
		escort -- escort2;
		escort -- escort3;
		escort -- escort4;

	top -- air;
		air -- air1;
		air -- air2;
		air -- air3;
		air -- air4;

	top -- submarine;
		submarine -- submarine1;
		submarine -- submarine2;

	top -- fare;
}

変換すると次のようになります。

(補足)

最後に追加したノード:”掃海隊群 (横須賀)”が一番上に出てます。

Graphvizでも同じ事ですが、ノードがどの位置に出力されるかはレイアウトエンジン次第です。 そのためノードの出力位置が、作成者の希望に沿わないことが良くあります。

会社の組織図などを作った場合、レイアウトがエライ人の意に沿わなくてボツ…結局 Visio で作り直し、なんてことも有り得ます。

ver.0.5.5 で対応して頂きました。 これで安心です。

最後に

Graphviz はレイアウトエンジンが賢く、どんなスクリプトを食べさせても、それなりのグラフ化してくれて素晴らしいのですが、唯一、直角線で描いてくれないのが不満でした。

その点、blockdiag はシャキっとした日本人好み(?)のグラフを出力してくれるので、ドキュメントに貼り付けても見栄えがよくお客さん受けしそうです。

Graphviz と blockdiag、適材適所で使い分けていきたいと思います。

6 comments to blockdiag でいろいろ書いてみる

  • blockdiag の中の人です。

    blockdiag でノードを配置するときはなるべく出現順に並ぶようにしています。
    そのため、fare の定義を group 定義の後に持って行くと意図通りに並びます。
    (fare が escort group より先に定義されているので、上の方に並んでいる)

    ただ、並び替えが必要なのはしっくりこないところもあるので、何かいい方法がないか考えてみます。

  • [...] This post was mentioned on Twitter by Takeshi Komiya. Takeshi Komiya said: blockdiag の記事を書いてもらったよ! RT @wPythonnews: blockdiag でいろいろ書いてみる « Stop Making Sense http://bit.ly/gYupRA [...]

  • Anonymous

    Graphvizと比べると文字の表示が残念な感じなので、
    –antialiasも使ってもらえるとblockdiagのヨサゲ具合が上がると思います。

    • 99blues

      アドバイスありがとうございます。文字のギザギザが減って良い感じですね。
      本文中の画像も差し替えてみました。

  • [...] blockdiag でいろいろ書いてみる デフォルトのフォントの位置が書いてあるので助かりました。 でも、CentOSのデフォルトってこんな感じなんですよねー。 [root@redalarm blockdiag]# ls -lha /usr/share/fonts/ja/TrueType/kochi- kochi-gothic-subst.ttf kochi-mincho-subst.ttf   [root@redalarm blockdiag]# ls -lha /usr/share/fonts/japanese/TrueType/ fonts.alias fonts.scale sazanami-mincho.ttf fonts.dir sazanami-gothic.ttf 念のために、インストールされているプログラムがどんな定義か確認。 [root@redalarm blockdiag]# cd /usr/lib/python2.4/site-packages/blockdiag-1.1.0-py2.4.egg/blockdiag [root@redalarm blockdiag]# fgrep -R fonts ./* ./command.py: fonts = ['c:/windows/fonts/VL-Gothic-Regular.ttf', # for Windows fonts = ['c:/windows/fonts/VL-Gothic-Regular.ttf', # for Windows 'c:/windows/fonts/msmincho.ttf', # for Windows '/usr/share/fonts/truetype/ipafont/ipagp.ttf', # for Debian '/usr/local/share/font-ipa/ipagp.otf', # for FreeBSD '/Library/Fonts/Hiragino Sans GB W3.otf', # for MacOS '/System/Library/Fonts/AppleGothic.ttf'] # for MacOS なるほど。本当はTracの設定ファイルでfontを指定出来るらしいんだけれど、同じサーバにいくつもプロジェクトが走っていて、 それをすべて変更するのは面倒だったので、シンボリックリンクを張っちゃうことにしたり。(IPAフォントのインストールは割愛) 参考はここです。 [...]