使用 Graphviz 画拓扑图-阿里云开发者社区

开发者社区> 范大脚脚> 正文

使用 Graphviz 画拓扑图

简介:
+关注继续查看

0)前述

本文着重讲一下 Graphviz 的风格控制,基础一些的就不在这里讲啦。

graphviz 的主页是http://www.graphviz.org/

Graphviz 的安装和使用请看这里:http://www.cnblogs.com/fengbohello/p/4689131.html

1)从 Record 开始

下面通过一个简单示例开始吧:

在 Graphviz 的文档页有如下一张图,下面就用它里开始练习了。

简单的 Record 风格

这里

这幅图的dot代码如下:

复制代码
01 digraph A {
02     node [shape=record];
03     struct1 [label="<f0> left|<f1> middle|<f2> right"];
04     struct2 [label="<f0> one|<f1> two"];
05     struct3 [label="hello \n world |{ b |{c|<here> d|e}| f}| g | h"];
06     struct1:f1 -> struct2:f0;
07     struct1:f2 -> struct3:here;
08 }
复制代码

第一行,声明图的类型为 "digraph" 和图的ID 为 "A"

第二行,声明本图的node的类型均为Record

第三行,声明了一个结构体,并且结构体分为三部分,分别为f0,f1,f2。f0的名称为left,f1的名称为middle,f2的名称为right。这三部分用"|"隔开,并且他们都属于这个struct1这个结构体的label.

第四行,声明了struct2。

第五行,看起来稍微复杂些。这一行声明了结构体struct3,并且使用了三层嵌套。第一层是“helloworld”、“b,c,d,e,f”、“g”和“h”。第二层是“b,c,d,e,f”这一组被分割成了三部分:“b”、"c,d,e"和"f"。第三层是"c,d,e"又被分割成了"c"、“d“和“e”三部分。嵌套的时候,使用大括号进行隔离。

第六~七行,开始建立node间的关系。struct1的f0指向struct2的f0;struct1 的 f2 指向 struct3 的 here。

从这段脚本代码的直观感受,dot脚本语言是一个描述型语言。 相信参照这个例子,已经可以写出关系清晰的拓扑图了。


接下来我们再来看一下另一种写法。

here

复制代码
digraph structs {
    node [shape=plaintext]
    struct1 [label=<
    <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
    <TR>
        <TD>left</TD>
        <TD PORT="f1">middle</TD>
        <TD PORT="f2">right</TD>
    </TR>
    </TABLE>>];

    struct2 [label=<
    <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
    <TR>
        <TD PORT="f0">one</TD>
        <TD>two</TD>
    </TR>
    </TABLE>>];

    struct3 [label=<
    <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
    <TR>
        <TD ROWSPAN="3">hello<BR/>world</TD>
        <TD COLSPAN="3">b</TD>
        <TD ROWSPAN="3">g</TD>
        <TD ROWSPAN="3">h</TD>
    </TR>
    <TR>
        <TD>c</TD>
        <TD PORT="here">d</TD>
        <TD>e</TD>
    </TR>
    <TR>
        <TD COLSPAN="3">f</TD>
    </TR>
    </TABLE>>];

    struct1:f1 -> struct2:f0;
    struct1:f2 -> struct3:here;
}
复制代码

这段代码就不详细解释了,对照着图像仔细想一想,应该也能想明白。熟悉HTML同学应该一眼就看明白了,其中的table、tr、td等,就是HTML里面的table。照着这个思路去看,应该能理解的更快。其中的COLSPAN等关键字在文档页中可以找到其具体含义。


我想分析一下下面这个图:

more

代码如下(或者这里

复制代码
01  digraph G {
02      rankdir=LR
03      node [shape=plaintext]
04
05      a [
06          label=<
07          <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
08          <TR>
09              <TD ROWSPAN="3" BGCOLOR="yellow">class</TD>
10          </TR>
11          <TR>
12              <TD PORT="here" BGCOLOR="lightblue">qualifier</TD>
13          </TR>
14          </TABLE>>
15      ]
16
17     b [shape=ellipse style=filled
18     label=<
19     <TABLE BGCOLOR="bisque">
20     <TR>
21         <TD COLSPAN="3">elephant</TD> 
22         <TD ROWSPAN="2" BGCOLOR="chartreuse" 
23             VALIGN="bottom" ALIGN="right">two</TD> 
24     </TR>
25     <TR>
26         <TD COLSPAN="2" ROWSPAN="2">
27             <TABLE BGCOLOR="grey">
28             <TR> 
29                 <TD>corn</TD> 
30             </TR> 
31             <TR> 
32                 <TD BGCOLOR="yellow">c</TD> 
33             </TR> 
34             <TR> 
35                 <TD>f</TD> 
36             </TR> 
37             </TABLE> 
38         </TD>
39         <TD BGCOLOR="white">penguin</TD> 
40      </TR> 
41      <TR> 
42          <TD COLSPAN="2" BORDER="4" ALIGN="right" PORT="there">4</TD> 
43      </TR>
44      </TABLE>>
45      ]
46
47      c [ 
48          label=<
49              long line 1<BR/>line 2<BR ALIGN="LEFT"/>line 3<BR ALIGN="RIGHT"/>>
50      ]
51  
52      subgraph { rank=same b c }
53      a:here -> b:there [dir=both arrowtail = diamond]
54      c -> b
55      d [shape=triangle]
56      d -> c [label=<
57      <TABLE>
58      <TR>
59          <TD BGCOLOR="red" WIDTH="10"> </TD>
60          <TD>Edge labels<BR/>also</TD>
61          <TD BGCOLOR="blue" WIDTH="10"> </TD>
62      </TR>
63      </TABLE>>
64      ]
65  }
复制代码

 

分析

第5行到第15行,定义了一个 node,这个 node 的label是一个table。图片的左下角就是这个node啦。

第7行,定义了这个table的属性,属性值如下:

属性 具体含义
BORDER="value" specifies the width of the border around the object in points
CELLBORDER="value" specifies the width of the border for all cells in a table. It can be overridden by a BORDER tag in a cell.
CELLSPACING="value" specifies the space, in points, between cells in a table and between a cell and the table's border.
ROWSPAN="value" specifies the number of rows spanned by the cell.
BGCOLOR="color" sets the color of the background. This color can be overridden by a BGCOLOR attribute in descendents.
PORT="value" attaches a portname to the object. (See portPos.)
COLSPAN="value" specifies the number of columns spanned by the cell.

第8~13行,定义了两个单元格。

第17~45行 定义了node :b。

第17行,指明了node的shape是ellipse(椭圆),style是filled。

第19~40行,这段代码直接扔到html页面里面,也可以看到差不多相同的效果:

elephant two
corn
c
f
penguin
4

感觉不需要再写下去了,再写下去的话就是在写html了。所以放一个html的table教程链接吧。http://www.w3school.com.cn/tags/tag_table.asp

所以学好html是关键!!!



本文转自郝峰波博客园博客,原文链接:http://www.cnblogs.com/fengbohello/p/5856085.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10092 0
使用Doxygen + graphviz生成Unity 3d的UGUI类图
下载软件 1) Graphviz,下载地址:http://download.csdn.net/detail/u010953266/8591169 为什么不用官网?一是下载速度慢,二是下载到本地的文件貌似是有损坏的,每次安装都报错,后来直接放弃了,从其它地方搜到的; 2)Doxygen,下载地址:https://sourceforge.
1140 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11819 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11893 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4510 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载