Graphviz

graphviz.png

リファレンス

ノードにリンクを貼る

孔子 [href="http://ja.wikipedia.org/wiki/孔子"];

URLでもok

孔子 [URL="http://ja.wikipedia.org/wiki/孔子"];

環境構築

Graphizをインストールして

C:\Program Files\Graphviz2.30\bin

に環境変数PATHを通す。
Macの場合は

/usr/local/bin/dot
export PATH=$PATH:/usr/local/bin/dot

で環境変数を追記だ★
コマンドプロンプトでdotというコマンドが使えるようになったはず。
Sublimeでビルドさせるにはこれ

{
    "cmd": ["dot","-Tpng","$file","-o","$file_base_name.png"],
    "path":"/usr/local/bin/"
}

サンプルコードをコンパイルしてみる

digraph sample {
   alpha -> beta;
   alpha -> gamma;
  beta -> delta;
}

上記のコードをsample.dotという名前で保存してみる。
そしてコマンドプロンプトを立ち上げて

dot -Tpng sample1.dot -o sample1.png

とか

dot -Tgif sample1.dot -o sample1.gif

やってみる。
画像ができるはず
さて、私の最大の目的はsvgですよ!ってことでやってみよう。

dot -Tsvg sample1.dot -o sample1.svg

コンパイルできた。
おおっしかも、今までのダメなコンバーターと違って、ちゃんと丸はellipseで表現してある。!優秀~♪


しかし、背景は白じゃなくていいんですけど。

背景を透明にする

背景を透明にして、かつ日本語もやってみた

digraph sample {
    graph[bgcolor="#00000000"];
   alpha -> ミッフィー;
   alpha -> gamma;
  beta -> delta;
}

pngだと日本語がバグるけど、svgでは問題なしだね。

ノードに色をぬる

digraph sample {
    graph[bgcolor="#00000000"];
    node [fontname="MS Gothic", style="filled",
    fillcolor="greenyellow"];
   alpha -> ミッフィー;
   alpha -> gamma;
  ミッフィー -> delta;
}


うーん、このままじゃかっこわるい。枠線に色をつけよう。

枠線に色をつける

そろそろ重くなってきたので次のページへ
graphviz-style

サポートサイト Wikidot.com