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

相关文章