GraphViz によるグラフ描画が超便利すぎる件について

UML::Class::Simple で Catalyst のクラス継承図を描いてみた　の時にインストールした GrapgViz ですが、DOT 言語を覚えるとグラフ描画が必要な要件に対する解決策として大変有効かつ便利な事に気がつきました。

いろいろと自分が触るのに、いちいちアレコレするのが面倒になってきたので、簡易 CGI も記述しました。これが超便利。自分的に。ソースも晒しておくので、どうぞご自由にお持ち帰り下さい。

ちょっとした使い捨てプログラムのシーケンスを人に説明したり、アンケート等のページ遷移を説明したりするのに、ちょちょっと描画したりする時に威力を発揮します。ドキュメントを書くのが猛烈に面倒くさい僕みたいなタイプの人は、DOT言語を覚えておいて損はないかと思います。

改めて Graphviz - Graph Visualization Software についての説明

Graphviz（Graph Visualization Software）は AT&T研究所が開発したオープンソースのツールパッケージであり、DOT言語のスクリプトで示されたグラフを描画する。パッケージにはアプリケーションソフトウェアからツールを使うためのライブラリも含まれる。Graphviz は Common Public License ライセンスで提供されるフリーソフトウェアである。
- スポンサーリンク -

参考ページ


→ブラウザ上で DOT 言語を記述してサーバ側でグラフ描画するデモはこちら

上記 GraphViz CGI demo のソースはこちら。※セキュリティのことかあまり真剣に考えてない・・・のでご注意。 

#! /usr/bin/perl

use strict;
use warnings;
use CGI;

## ==================================================================
## メインルーチン
## ==================================================================
my $r   = CGI->new;
my $dot = $r->param('dot');

## 初期画面表示
if ( !$dot ) {
    _form();
}
## 一定量以上のデータリクエストは破棄する
elsif ( length($dot) > 1024 * 10 ) {
    _form( 'DOT言語が長すぎるので中止します。', '' );
}
## DOT言語を描画する
else {
    my $time    = time;
    my $infile  = "work/in_$time";
    my $outfile = "work/out_$time\.png";
    ## いったん入力データをtimestampベースでファイルに出力する
    open my $fh, '>', $infile;
    print $fh $dot;
    close $fh;
    ## DOT で描画
    `dot -Tpng $infile > $outfile`;
    ## 出力ファイルを解析。ファイルサイズ0ならエラー
    my @stat = stat $outfile;
    unless ( $stat[7] ) {
        _form( '入力されたDOT言語に誤りがあります。', $dot );
        unlink $infile;
    }
    ## 正常処理
    else {
        ## 不要な画像を消す
        my @files = glob "work/out_*";
        for my $oname (@files) {
            my ($iname) = $oname =~ /out_(\d+)\.png/;
            $iname = "work/in_$iname";
            unlink $oname unless -e $iname;
        }
        _form( qq{<img src="$outfile">}, $dot );
        unlink $infile;
    }
}

## ==================================================================
## 画面表示関数
## ==================================================================
sub _form {
    my $img = shift || '';
    my $dot = shift || 'digraph G {Hello->World}';

    my $html = do { local $/; <DATA> };
    $html =~ s/\#\#img\#\#/$img/msx;
    $html =~ s/\#\#data\#\#/$dot/msx;

    print $html;
}

1;
__DATA__
Content-Type: text/html; charset=UTF-8

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Graphviz CGI demo</title>
</head>
<body>
<h1><a href="graphviz.cgi">Graphviz CGI demo</a></h1>
<h2>DOT 言語を記述して下さい。
（<a href="http://www.graphviz.org/doc/info/lang.html" target="_blank">DOT言語仕様はこちらを参照ください。</a>）</h2>
<p><u>DOT言語 sample →</u>
 <a href="#" onclick="sample(0)">Clusters</a> 
| <a href="#" onclick="sample(1)">Polygons</a> 
| <a href="#" onclick="sample(2)">DataStructures</a> 
| <a href="#" onclick="sample(3)">FiniteAutomaton</a> 
| <a href="#" onclick="sample(4)">Genetic_Programming</a> 
| <a href="#" onclick="sample(5)">lion_share </a> 
</p>
<form method="post" action="graphviz.cgi">
<textarea id="dot" name="dot" rows="10" style="width: 500px">
##data##
</textarea>
<br>
<input type="submit" value="グラフ描画する">
</form>
<h2>DOT 言語から描画したグラフです。</h2>
##img##

<script>

function sample(idx) {
  var text = [
'digraph G {\n	subgraph cluster_0 {\n		style=filled;\n		color=lightgrey;\n		node [style=filled,color=white];\n		a0 -> a1 -> a2 -> a3;\n		label = "process #1";\n	}\n\n	subgraph cluster_1 {\n		node [style=filled];\n		b0 -> b1 -> b2 -> b3;\n		label = "process #2";\n		color=blue\n	}\n	start -> a0;\n	start -> b0;\n	a1 -> b3;\n	b2 -> a3;\n	a3 -> a0;\n	a3 -> end;\n	b3 -> end;\n\n	start [shape=Mdiamond];\n	end [shape=Msquare];\n}'
,
'digraph "unix" {\n	graph [	fontname = "Helvetica-Oblique",\n		fontsize = 36,\n		label = "Object Oriented Graphs",\n		size = "6,6" ];\n	node [	shape = polygon,\n		sides = 4,\n		distortion = "0.0",\n		orientation = "0.0",\n		skew = "0.0",\n		color = white,\n		style = filled,\n		fontname = "Helvetica-Outline" ];\n	"5th Edition" [sides=9, distortion="0.936354", orientation=28, skew="-0.126818", color=salmon2];\n	"6th Edition" [sides=5, distortion="0.238792", orientation=11, skew="0.995935", color=deepskyblue];\n	"PWB 1.0" [sides=8, distortion="0.019636", orientation=79, skew="-0.440424", color=goldenrod2];\n	LSX [sides=9, distortion="-0.698271", orientation=22, skew="-0.195492", color=burlywood2];\n	"1 BSD" [sides=7, distortion="0.265084", orientation=26, skew="0.403659", color=gold1];\n	"Mini Unix" [distortion="0.039386", orientation=2, skew="-0.461120", color=greenyellow];\n	Wollongong [sides=5, distortion="0.228564", orientation=63, skew="-0.062846", color=darkseagreen];\n	Interdata [distortion="0.624013", orientation=56, skew="0.101396", color=dodgerblue1];\n	"Unix/TS 3.0" [sides=8, distortion="0.731383", orientation=43, skew="-0.824612", color=thistle2];\n	"PWB 2.0" [sides=6, distortion="0.592100", orientation=34, skew="-0.719269", color=darkolivegreen3];\n	"7th Edition" [sides=10, distortion="0.298417", orientation=65, skew="0.310367", color=chocolate];\n	"8th Edition" [distortion="-0.997093", orientation=50, skew="-0.061117", color=turquoise3];\n	"32V" [sides=7, distortion="0.878516", orientation=19, skew="0.592905", color=steelblue3];\n	V7M [sides=10, distortion="-0.960249", orientation=32, skew="0.460424", color=navy];\n	"Ultrix-11" [sides=10, distortion="-0.633186", orientation=10, skew="0.333125", color=darkseagreen4];\n	Xenix [sides=8, distortion="-0.337997", orientation=52, skew="-0.760726", color=coral];\n	"UniPlus+" [sides=7, distortion="0.788483", orientation=39, skew="-0.526284", color=darkolivegreen3];\n	"9th Edition" [sides=7, distortion="0.138690", orientation=55, skew="0.554049", color=coral3];\n	"2 BSD" [sides=7, distortion="-0.010661", orientation=84, skew="0.179249", color=blanchedalmond];\n	"2.8 BSD" [distortion="-0.239422", orientation=44, skew="0.053841", color=lightskyblue1];\n	"2.9 BSD" [distortion="-0.843381", orientation=70, skew="-0.601395", color=aquamarine2];\n	"3 BSD" [sides=10, distortion="0.251820", orientation=18, skew="-0.530618", color=lemonchiffon];\n	"4 BSD" [sides=5, distortion="-0.772300", orientation=24, skew="-0.028475", color=darkorange1];\n	"4.1 BSD" [distortion="-0.226170", orientation=38, skew="0.504053", color=lightyellow1];\n	"4.2 BSD" [sides=10, distortion="-0.807349", orientation=50, skew="-0.908842", color=darkorchid4];\n	"4.3 BSD" [sides=10, distortion="-0.030619", orientation=76, skew="0.985021", color=lemonchiffon2];\n	"Ultrix-32" [distortion="-0.644209", orientation=21, skew="0.307836", color=goldenrod3];\n	"PWB 1.2" [sides=7, distortion="0.640971", orientation=84, skew="-0.768455", color=cyan];\n	"USG 1.0" [distortion="0.758942", orientation=42, skew="0.039886", color=blue];\n	"CB Unix 1" [sides=9, distortion="-0.348692", orientation=42, skew="0.767058", color=firebrick];\n	"USG 2.0" [distortion="0.748625", orientation=74, skew="-0.647656", color=chartreuse4];\n	"CB Unix 2" [sides=10, distortion="0.851818", orientation=32, skew="-0.020120", color=greenyellow];\n	"CB Unix 3" [sides=10, distortion="0.992237", orientation=29, skew="0.256102", color=bisque4];\n	"Unix/TS++" [sides=6, distortion="0.545461", orientation=16, skew="0.313589", color=mistyrose2];\n	"PDP-11 Sys V" [sides=9, distortion="-0.267769", orientation=40, skew="0.271226", color=cadetblue1];\n	"USG 3.0" [distortion="-0.848455", orientation=44, skew="0.267152", color=bisque2];\n	"Unix/TS 1.0" [distortion="0.305594", orientation=75, skew="0.070516", color=orangered];\n	"TS 4.0" [sides=10, distortion="-0.641701", orientation=50, skew="-0.952502", color=crimson];\n	"System V.0" [sides=9, distortion="0.021556", orientation=26, skew="-0.729938", color=darkorange1];\n	"System V.2" [sides=6, distortion="0.985153", orientation=33, skew="-0.399752", color=darkolivegreen4];\n	"System V.3" [sides=7, distortion="-0.687574", orientation=58, skew="-0.180116", color=lightsteelblue1];\n	"5th Edition" -> "6th Edition";\n	"5th Edition" -> "PWB 1.0";\n	"6th Edition" -> LSX;\n	"6th Edition" -> "1 BSD";\n	"6th Edition" -> "Mini Unix";\n	"6th Edition" -> Wollongong;\n	"6th Edition" -> Interdata;\n	Interdata -> "Unix/TS 3.0";\n	Interdata -> "PWB 2.0";\n	Interdata -> "7th Edition";\n	"7th Edition" -> "8th Edition";\n	"7th Edition" -> "32V";\n	"7th Edition" -> V7M;\n	"7th Edition" -> "Ultrix-11";\n	"7th Edition" -> Xenix;\n	"7th Edition" -> "UniPlus+";\n	V7M -> "Ultrix-11";\n	"8th Edition" -> "9th Edition";\n	"1 BSD" -> "2 BSD";\n	"2 BSD" -> "2.8 BSD";\n	"2.8 BSD" -> "Ultrix-11";\n	"2.8 BSD" -> "2.9 BSD";\n	"32V" -> "3 BSD";\n	"3 BSD" -> "4 BSD";\n	"4 BSD" -> "4.1 BSD";\n	"4.1 BSD" -> "4.2 BSD";\n	"4.1 BSD" -> "2.8 BSD";\n	"4.1 BSD" -> "8th Edition";\n	"4.2 BSD" -> "4.3 BSD";\n	"4.2 BSD" -> "Ultrix-32";\n	"PWB 1.0" -> "PWB 1.2";\n	"PWB 1.0" -> "USG 1.0";\n	"PWB 1.2" -> "PWB 2.0";\n	"USG 1.0" -> "CB Unix 1";\n	"USG 1.0" -> "USG 2.0";\n	"CB Unix 1" -> "CB Unix 2";\n	"CB Unix 2" -> "CB Unix 3";\n	"CB Unix 3" -> "Unix/TS++";\n	"CB Unix 3" -> "PDP-11 Sys V";\n	"USG 2.0" -> "USG 3.0";\n	"USG 3.0" -> "Unix/TS 3.0";\n	"PWB 2.0" -> "Unix/TS 3.0";\n	"Unix/TS 1.0" -> "Unix/TS 3.0";\n	"Unix/TS 3.0" -> "TS 4.0";\n	"Unix/TS++" -> "TS 4.0";\n	"CB Unix 3" -> "TS 4.0";\n	"TS 4.0" -> "System V.0";\n	"System V.0" -> "System V.2";\n	"System V.2" -> "System V.3";\n}'
,
'digraph g {\ngraph [\nrankdir = "LR"\n];\nnode [\nfontsize = "16"\nshape = "ellipse"\n];\nedge [\n];\n"node0" [\nlabel = "<f0> 0x10ba8| <f1>"\nshape = "record"\n];\n"node1" [\nlabel = "<f0> 0xf7fc4380| <f1> | <f2> |-1"\nshape = "record"\n];\n"node2" [\nlabel = "<f0> 0xf7fc44b8| | |2"\nshape = "record"\n];\n"node3" [\nlabel = "<f0> 3.43322790286038071e-06|44.79998779296875|0"\nshape = "record"\n];\n"node4" [\nlabel = "<f0> 0xf7fc4380| <f1> | <f2> |2"\nshape = "record"\n];\n"node5" [\nlabel = "<f0> (nil)| | |-1"\nshape = "record"\n];\n"node6" [\nlabel = "<f0> 0xf7fc4380| <f1> | <f2> |1"\nshape = "record"\n];\n"node7" [\nlabel = "<f0> 0xf7fc4380| <f1> | <f2> |2"\nshape = "record"\n];\n"node8" [\nlabel = "<f0> (nil)| | |-1"\nshape = "record"\n];\n"node9" [\nlabel = "<f0> (nil)| | |-1"\nshape = "record"\n];\n"node10" [\nlabel = "<f0> (nil)| <f1> | <f2> |-1"\nshape = "record"\n];\n"node11" [\nlabel = "<f0> (nil)| <f1> | <f2> |-1"\nshape = "record"\n];\n"node12" [\nlabel = "<f0> 0xf7fc43e0| | |1"\nshape = "record"\n];\n"node0":f0 -> "node1":f0 [\nid = 0\n];\n"node0":f1 -> "node2":f0 [\nid = 1\n];\n"node1":f0 -> "node3":f0 [\nid = 2\n];\n"node1":f1 -> "node4":f0 [\nid = 3\n];\n"node1":f2 -> "node5":f0 [\nid = 4\n];\n"node4":f0 -> "node3":f0 [\nid = 5\n];\n"node4":f1 -> "node6":f0 [\nid = 6\n];\n"node4":f2 -> "node10":f0 [\nid = 7\n];\n"node6":f0 -> "node3":f0 [\nid = 8\n];\n"node6":f1 -> "node7":f0 [\nid = 9\n];\n"node6":f2 -> "node9":f0 [\nid = 10\n];\n"node7":f0 -> "node3":f0 [\nid = 11\n];\n"node7":f1 -> "node1":f0 [\nid = 12\n];\n"node7":f2 -> "node8":f0 [\nid = 13\n];\n"node10":f1 -> "node11":f0 [\nid = 14\n];\n"node10":f2 -> "node12":f0 [\nid = 15\n];\n"node11":f2 -> "node1":f0 [\nid = 16\n];\n}\n\n'
,
'digraph finite_state_machine {\n	rankdir=LR;\n	size="8,5"\n	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;\n	node [shape = circle];\n	LR_0 -> LR_2 [ label = "SS(B)" ];\n	LR_0 -> LR_1 [ label = "SS(S)" ];\n	LR_1 -> LR_3 [ label = "S($end)" ];\n	LR_2 -> LR_6 [ label = "SS(b)" ];\n	LR_2 -> LR_5 [ label = "SS(a)" ];\n	LR_2 -> LR_4 [ label = "S(A)" ];\n	LR_5 -> LR_7 [ label = "S(b)" ];\n	LR_5 -> LR_5 [ label = "S(a)" ];\n	LR_6 -> LR_6 [ label = "S(b)" ];\n	LR_6 -> LR_5 [ label = "S(a)" ];\n	LR_7 -> LR_8 [ label = "S(b)" ];\n	LR_7 -> LR_5 [ label = "S(a)" ];\n	LR_8 -> LR_6 [ label = "S(b)" ];\n	LR_8 -> LR_5 [ label = "S(a)" ];\n}\n\n'
,
'graph ""\n   {\n   label="((+ (* (X) (- (- (X) (X)) (X))) (% (+ (X) (X)) (COS (- (X) (X))))) (EXP (* (X) (X))) (+ (% (EXP (SIN (+ (X) (X)))) (SIN (* (X) (EXP (* (X) (X)))))) (* (X) (X))) (% (EXP (% (X) (% (X) (X)))) (EXP (SIN (X)))))"\n   subgraph cluster01\n   {\n   label="(+ (* (X) (- (- (X) (X)) (X))) (% (+ (X) (X)) (COS (- (X) (X)))))"\n   n002 ;\n   n002 [label="+"] ;\n   n002 -- n003 ;\n   n003 [label="*"] ;\n   n003 -- n004 ;\n   n004 [label="X"] ;\n   n003 -- n005 ;\n   n005 [label="-"] ;\n   n005 -- n006 ;\n   n006 [label="-"] ;\n   n006 -- n007 ;\n   n007 [label="X"] ;\n   n006 -- n008 ;\n   n008 [label="X"] ;\n   n005 -- n009 ;\n   n009 [label="X"] ;\n   n002 -- n010 ;\n   n010 [label="%"] ;\n   n010 -- n011 ;\n   n011 [label="+"] ;\n   n011 -- n012 ;\n   n012 [label="X"] ;\n   n011 -- n013 ;\n   n013 [label="X"] ;\n   n010 -- n014 ;\n   n014 [label="COS"] ;\n   n014 -- n015 ;\n   n015 [label="-"] ;\n   n015 -- n016 ;\n   n016 [label="X"] ;\n   n015 -- n017 ;\n   n017 [label="X"] ;\n   }\n\n   subgraph cluster17\n   {\n   label="(EXP (* (X) (X)))"\n   n018 ;\n   n018 [label="EXP"] ;\n   n018 -- n019 ;\n   n019 [label="*"] ;\n   n019 -- n020 ;\n   n020 [label="X"] ;\n   n019 -- n021 ;\n   n021 [label="X"] ;\n   }\n\n   subgraph cluster21\n   {\n   label="(+ (% (EXP (SIN (+ (X) (X)))) (SIN (* (X) (EXP (* (X) (X)))))) (* (X) (X)))"\n   n022 ;\n   n022 [label="+"] ;\n   n022 -- n023 ;\n   n023 [label="%"] ;\n   n023 -- n024 ;\n   n024 [label="EXP"] ;\n   n024 -- n025 ;\n   n025 [label="SIN"] ;\n   n025 -- n026 ;\n   n026 [label="+"] ;\n   n026 -- n027 ;\n   n027 [label="X"] ;\n   n026 -- n028 ;\n   n028 [label="X"] ;\n   n023 -- n029 ;\n   n029 [label="SIN"] ;\n   n029 -- n030 ;\n   n030 [label="*"] ;\n   n030 -- n031 ;\n   n031 [label="X"] ;\n   n030 -- n032 ;\n   n032 [label="EXP"] ;\n   n032 -- n033 ;\n   n033 [label="*"] ;\n   n033 -- n034 ;\n   n034 [label="X"] ;\n   n033 -- n035 ;\n   n035 [label="X"] ;\n   n022 -- n036 ;\n   n036 [label="*"] ;\n   n036 -- n037 ;\n   n037 [label="X"] ;\n   n036 -- n038 ;\n   n038 [label="X"] ;\n   }\n   subgraph cluster38\n   {\n   label="(% (EXP (% (X) (% (X) (X)))) (EXP (SIN (X))))"\n   n039 ;\n   n039 [label="%"] ;\n   n039 -- n040 ;\n   n040 [label="EXP"] ;\n   n040 -- n041 ;\n   n041 [label="%"] ;\n   n041 -- n042 ;\n   n042 [label="X"] ;\n   n041 -- n043 ;\n   n043 [label="%"] ;\n   n043 -- n044 ;\n   n044 [label="X"] ;\n   n043 -- n045 ;\n   n045 [label="X"] ;\n   n039 -- n046 ;\n   n046 [label="EXP"] ;\n   n046 -- n047 ;\n   n047 [label="SIN"] ;\n   n047 -- n048 ;\n   n048 [label="X"] ;\n   }\n   }\n\n\n'
,
'digraph Ped_Lion_Share           {\nratio = "auto" ;\nmincross = 2.0 ;\nlabel = "Pedigree Lion_Share" ;\n\n"001" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"002" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"003" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"004" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"005" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"006" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"007" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"009" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"014" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"015" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"016" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"ZZ01" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"ZZ02" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"017" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"012" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"008" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"011" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"013" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"010" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"023" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"020" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"021" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"018" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"025" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"019" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"022" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"024" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"027" [shape=circle  , regular=1,style=filled,fillcolor=white   ] ;\n"026" [shape=box     , regular=1,style=filled,fillcolor=white   ] ;\n"028" [shape=box     , regular=1,style=filled,fillcolor=grey    ] ;\n"marr0001" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"001" -> "marr0001" [dir=none,weight=1] ;\n"007" -> "marr0001" [dir=none,weight=1] ;\n"marr0001" -> "017" [dir=none, weight=2] ;\n"marr0002" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"001" -> "marr0002" [dir=none,weight=1] ;\n"ZZ02" -> "marr0002" [dir=none,weight=1] ;\n"marr0002" -> "012" [dir=none, weight=2] ;\n"marr0003" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"002" -> "marr0003" [dir=none,weight=1] ;\n"003" -> "marr0003" [dir=none,weight=1] ;\n"marr0003" -> "008" [dir=none, weight=2] ;\n"marr0004" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"002" -> "marr0004" [dir=none,weight=1] ;\n"006" -> "marr0004" [dir=none,weight=1] ;\n"marr0004" -> "011" [dir=none, weight=2] ;\n"marr0005" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"002" -> "marr0005" [dir=none,weight=1] ;\n"ZZ01" -> "marr0005" [dir=none,weight=1] ;\n"marr0005" -> "013" [dir=none, weight=2] ;\n"marr0006" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"004" -> "marr0006" [dir=none,weight=1] ;\n"009" -> "marr0006" [dir=none,weight=1] ;\n"marr0006" -> "010" [dir=none, weight=2] ;\n"marr0007" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"005" -> "marr0007" [dir=none,weight=1] ;\n"015" -> "marr0007" [dir=none,weight=1] ;\n"marr0007" -> "023" [dir=none, weight=2] ;\n"marr0008" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"005" -> "marr0008" [dir=none,weight=1] ;\n"016" -> "marr0008" [dir=none,weight=1] ;\n"marr0008" -> "020" [dir=none, weight=2] ;\n"marr0009" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"005" -> "marr0009" [dir=none,weight=1] ;\n"012" -> "marr0009" [dir=none,weight=1] ;\n"marr0009" -> "021" [dir=none, weight=2] ;\n"marr0010" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"008" -> "marr0010" [dir=none,weight=1] ;\n"017" -> "marr0010" [dir=none,weight=1] ;\n"marr0010" -> "018" [dir=none, weight=2] ;\n"marr0011" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"011" -> "marr0011" [dir=none,weight=1] ;\n"023" -> "marr0011" [dir=none,weight=1] ;\n"marr0011" -> "025" [dir=none, weight=2] ;\n"marr0012" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"013" -> "marr0012" [dir=none,weight=1] ;\n"014" -> "marr0012" [dir=none,weight=1] ;\n"marr0012" -> "019" [dir=none, weight=2] ;\n"marr0013" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"010" -> "marr0013" [dir=none,weight=1] ;\n"021" -> "marr0013" [dir=none,weight=1] ;\n"marr0013" -> "022" [dir=none, weight=2] ;\n"marr0014" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"019" -> "marr0014" [dir=none,weight=1] ;\n"020" -> "marr0014" [dir=none,weight=1] ;\n"marr0014" -> "024" [dir=none, weight=2] ;\n"marr0015" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"022" -> "marr0015" [dir=none,weight=1] ;\n"025" -> "marr0015" [dir=none,weight=1] ;\n"marr0015" -> "027" [dir=none, weight=2] ;\n"marr0016" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"024" -> "marr0016" [dir=none,weight=1] ;\n"018" -> "marr0016" [dir=none,weight=1] ;\n"marr0016" -> "026" [dir=none, weight=2] ;\n"marr0017" [shape=diamond,style=filled,label="",height=.1,width=.1] ;\n"026" -> "marr0017" [dir=none,weight=1] ;\n"027" -> "marr0017" [dir=none,weight=1] ;\n"marr0017" -> "028" [dir=none, weight=2] ;\n}\n\n'
  ];
  document.getElementById('dot').value = text[idx];
}
</script>

</body>
</html>

GraphViz をソースからインストール方法についてはこちらの記事をご覧下さい。
手っ取り早く rpm でインストールしちゃう場合はこんな感じでどうぞ。 

yum install graphviz
yum install graphviz-devel
yum install graphviz-devil
yum install graphviz-doc
yum install graphviz-gd
yum install graphviz-graphs
yum install graphviz-guile
yum install graphviz-perl

後々のことを考えて cpan 関連もインストールしておくといいかも。 

cpan> install GraphViz
- スポンサーリンク -

関連する記事＆スポンサーリンク