バーr……blog のようなもの 2025 年 04 月

04 月 12 日 ( 土 )

思考整理のためのツール GraphViz 編 (2)

今回は GraphViz の dot レイアウトエンジンでの基本的な図の描きかたを説明します。GraphViz でできることはノードを描くこととノードを矢印で結ぶことだけということになります。なので実はあまりお話しできることがありません。PlantUML のようにエレメントのなかにエレメントを入れるような入れ子構造も描けません。できることは非常にシンプルになります。

とはいえ前述のようにノードと矢印の種類は、テキストを画像に変換するツールのなかでは最多を誇るので手放せないわけです。

それではシンプルな例を紹介します。

クリックまたはタップすると新しいタブで表示され拡大等しやすくなる。図のソースファイルはここ。

ソースは以下のようになります。

digraph sample {
	cust[shape="ellipse", label="お客様"];
	subgraph cluster_our {
		label=<<b>弊社</b>>;
		color=black;
		fillcolor=lightgray;
		style="filled";
		eigyou[shape="box", label="営業部", style="filled", fillcolor=white];
		dev[shape="box", label="開発部", style="filled", fillcolor=white];
		{rank=same;eigyou;dev;}
		eigyou -> dev [label="開発依頼"];
	}
	cust -> eigyou [label="発注"];
	dev -> cust [label="納品"];
}

どこがシンプルなのかという声が聞こえてきそうですが、コードの見た目に反して実はシンプルです。ノードは cust、eigyou、dev の 3 つしかありません。その 3 つのノードを 3 本の矢印で結んでいるだけです。

subgraph とは何？ということですが、本来の subgraph の存在理由を無視して使っています。先程ノードは入れ子にできないと書きました。でもそれでは多くの場合困ってしまいます。そのために本来ノードではない subgraph をノードの代わりにまるでノードのように振る舞わせて利用しています。

subgraph はノードではないので shape は指定できません。指定できないといってもエラーになるのではなく単に無視されます。とはいえ subgraph は何重にも入れ子にすることができるので、rectangle の代りとしてよく利用されます。rectangle ではないのですけど。

それと subgraph は通常画像要素として出力されません。あくまで subgraph は各ノードをグループ化するものであって、ノードのように表示する対象となる何かでは本来ないからです。

とはいえグループをまとめる subgroup が視認可能となることで、グルーピングが可視化されると、なにかと都合が良いということもあり、subgraph を可視化することができるようにはなっています。

subgraph を可視化するにはクラスターとして扱ってやる必要があります。クラスター化するのは簡単です。subgraph の名称先頭に "cluster_" という文字列を入れてやれば、その subgraph はクラスター化されます。クラスター化された subgraph にはまるでノードのように label、color、fillcolor、style などの属性を指定することができるようになり、可視化されるようになります。

次に rank についてですが、rank は複数のノードが指定された高さあるいは X 軸方向の位置になるように GraphViz がレイアウトのときになるべく従うように自動調整します。ここでは same を指定しいるので eigyou と dev がなるべく同じ高さになるように GraphViz は画像を調整します。

GraphViz でレイアウトを調整したいときは、subgraph、rank、style に invis が指定された矢印を駆使することになります。とはいえ何度も言うようにユーザが好きにレイアウトを設定することはほぼ不可能であることに変わりはありません。

GraphViz の使い方についてはこれで終りますが、もしもっと知りたい場合は "GraphViz example" などの文字列でいろんなサンプルがヒットするので参照するのがいいでしょう。GraphViz のドキュメントはまるで Unix コマンドのヘルプのようで決してテキストと図がサクッと結びつくのは難しいのではないかと思います。

次回からはモダンな画像を出力する Web ブラウザ環境などで動作する mermaid.js を取り上げたいと思います。

今日の鳥見兼デイケア通所

今朝は往路で以下の野鳥を見掛けました。