自作画像なノード

graphviz-image.png

簡単な方法

d [shape=none, label="", image="X_Shape_Pillar_Yellow.png"];

htmlを使う方法

gnaphviz では、label の指定に HTML ライクな書式が使える。使える要素は、table, br, font, img の 4 つ。これを " ではなく < と > で囲む。
table, br, font はどこででも書けるけど、img 要素は table の中でしか書けない。
table の中では tr, td 要素を使うことができる。なので画像を貼る最小のコードは次のようになる。

node[label=«table border="0" cellborder="0"><tr><td><img src="hoge.png"/></td></tr></table»];

digraph blockdiagram {
  node [shape=plaintext];
 
  input [label=<<table><tr><td><img src="img/input.png"/></td></tr></table>>];
  output [label=<<table><tr><td><img src="img/output.png"/></td></tr></table>>];
 
  input->output;
}

このままだと、変な線が発生する
simple.png
こうするといい
digraph blockdiagram {
  node [shape=none,color="transparent"]input output;
  input [label=<<table><tr><td><img src="img/input.png"/></td></tr></table>>];
  output [label=<<table><tr><td><img src="img/output.png"/></td></tr></table>>];
  input->output;
}

これを防ぐには

label=«table border="0" cellborder="0">…

tableの属性にborder="0" cellborder="0"を追加してやるといい。

アウトプット結果のSVG

<g xmlns="http://www.w3.org/2000/svg" id="node2" class="node"><title>output</title>
<polygon fill="none" stroke="none" points="655,-102 655,-372 989,-372 989,-102 655,-102"/>
<image xlink:href="img/output.png" xmlns:xlink="http://www.w3.org/1999/xlink" width="328px" height="264px" preserveAspectRatio="xMinYMin meet" x="658" y="-369"/>
<polygon fill="none" stroke="none" points="652,-99 652,-375 992,-375 992,-99 652,-99"/>
</g>

画像と文字が一緒になったとき、困った!

subgraph.png
subgraph cluster_mainloop{
      color=black;
      {rank=same;    
    inputhandle[label="入力情報の取得"];
    update[label="データ更新"];
    draw[label="描画"];
 
    }
    inputhandle->update->draw;
    label=<<table><tr><td><img src="img/mainloop.png"/></td></tr></table>>;
  }

背景画像になってほしいのに。

graphviz-node

サポートサイト Wikidot.com graphviz-node