在线graphviz作图工具 - Greatest

时间:2024-02-19 19:35:45

在线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吧!