在线graphviz作图工具

graphviz是一款免费的作图工具。在www.graphviz.org下载。

graphviz使用dot语言来作图，好处就是你根本不需要考虑元素之间的布局，只需要关心它们之间的关系，程序就可以自动调节他们的位置了。

原版的graphviz是命令行模式的程序，使用起来不是很方便，而且要安装，所以这里介绍的是在线的graphviz。

http://graph.gafol.net/bZMJPXk

http://ashitani.jp/gv/

推荐第一个，第二个是日本人做的ajax版本的功能较弱，某些dot的语法不支持。

下面就通过一些简单的例子来学习一下graphviz的dot语言吧。

	代码： a->b->c; b->d; d->a; 使用 ->表示有向边，--表示无向边。但是不可以混用有向边和无向边。
	代码： a->b->c; b->d; d->a[label="Edge label"]; a[label="This is a.\nYeah!"]; a[color=red,shape=box,fontcolor=blue]; 定义节点和边的属性。更多的属性可以去看官方网站，属性实在是太多了。
	代码： node[shape=box]; edge[color=red]; a->b->c; b->d; edge[color=blue]; d->a; 定义节点和边默认的属性。
	代码： a->b->c; b->d; d->a; {rank=same;b;d;} 设定b和d有相同的rank。也就是说对于从上到下的图来说，在同一水平线上。
	代码： rankdir=LR; a->b->c; b->d; d->a; {rank=same;b;d;} 设定图的属性rankdir，LR表示left right。看看和上图有什么不一样。
	代码： node[shape=record]; a[label="<l>|<m>A|<r>"]; b[label="<l>|<m>B|<r>"]; c[label="<l>|<m>C|<r>"]; a:m->b:m; a:m->c:m; b:r->c:r; 最后有点复杂。当节点的shape是record的话，label有特殊的含义可以定义复杂的节点，甚至label可以支持html哦。 具体含义看官方网站，或者当上面的网站去做试验吧。

 

 

最后说明一下，由于字体的原因，上述2个网站的作图都不支持中文。要中文的话，还是下载graphviz吧！