こんな感じの画像を作る際に

これまではパワポの図形機能とかペイントで頑張って作っていましたが、
Graphvizを使うと自動で出力できます。

Graphvizとは

AT&Tが作ったグラフ描画のツールパッケージです。
http://ja.wikipedia.org/wiki/Graphviz

DOT言語というグラフ記述言語で記述されたグラフを、画像ファイル等に変換することができます。

グラフのレイアウト等はGraphviz内のアルゴリズムによって自動で配置されますが、
SVGで出力できるため、他のソフトで調整ができます。

使い方

インストール

brew gts graphviz

dotファイルの作成

最初に見せたグラフは以下のように作ります。

digraph G {
  Hono[image="th_hono.png", label="", shape=plaintext];
  Koto[image="th_koto.png", label="", shape=plaintext];
  Umi[image="th_umi.png", label="", shape=plaintext];
  Maki[image="th_maki.png", label="", shape=plaintext];
  Rin[image="th_rin.png", label="", shape=plaintext];
  Pana[image="th_pana.png", label="", shape=plaintext];
  Nico[image="th_nico.png", label="", shape=plaintext];
  Nozo[image="th_nozo.png", label="", shape=plaintext];
  Eli[image="th_eli.png", label="", shape=plaintext];
  Yuki[label="雪穂"];

  Nico -> Maki;
  Koto -> Umi;
  Rin -> Pana;
  Rin -> Maki;
  Nozo -> Eli;
  Nozo -> Nico;
  Koto -> Hono[dir = none];
  Hono -> Umi;
  Hono -> Nico;
  Hono -> Maki;
  Hono -> Yuki;
  Hono -> Eli;
  Hono -> Rin;
}

初めにレイアウトに使うアルゴリズムを書きます。
次に画像だけ、文字だけといったノードを定義し、その関係を記述します。

出力

上記のファイルをcp.dotという名前で保存し、以下のコマンドを実行するとSVGファイルに出力されます。
dot -Tsvg cp.dot -o cp.svg

SVG以外にもgifやpngへの出力が可能です。
dot -Tpng cp.dot -o cp.png

レイアウト詳細

配置アルゴリズム等はこちらの記事が参考になると思います。
Graphvizレイアウトサンプル