【Graphviz/Dot】网络图设计

少女dtysky

世界Skill

时刻2015.03.02

诚然,MS的visio是个很强大的网络图工具,不但如此,其他的工具也很多,他们有一个共同点就是图形化界面,这对于一般用户是很友好的,但对于码农,或者说追求更加一点的可控性和效率亦或是懒人而言,还是码代码来的好写,生成排版就交给程序自己去做嘛(当然控制欲极强的人就绕道吧,用这个实现只会更加复杂),所以在基友的推荐下,用了下Graphviz——一个基于Dot语言的流程设计环境,意外感觉不错?


1.安装

在这里下载Graphviz:
http://www.graphviz.org/Download..php

根据自己os的类型选择下载完毕后,打开gvedit,我们就可以开始使用了。


2.入门

1.新建:
点击New按钮,新建一张流程图。

2.第一张图: 首先,在xxx.gv文件中输入代码:

graph x{
a -- c;
b -- c;
}

其次,键盘F5,便可以生成:


这是一张最简单的无向图,使用graph定义,元素依存关系用双横杠表征。

3.编码:
如果没有做任何设定,中文无法被正常编码,只会出现一个个方块,这时候我们可以这样解决:

首先,将文本保存为utf-8(默认是utf-8)。
其次,将字体设定为包含中文的自定字体:

edge [fontname="yourfontname"];
node [fontname="FangSong"];

前一个表示边缘的字体,后一个是节点的字体。

比如我这里是:

graph x{
    edge [fontname="FangSong"];
    node [fontname="FangSong"];
    a [label="我"];
    b [label="妹妹"];
    c [label="女儿"];
    a -- c;
    b -- c;
}

结果是:


4.属性:
不错,以上“编码”便是图的一种属性,每个元素都可以拥有各自的属性。

属性的定义方式也很简单,其基本形式如下:

x [xa="",xb=""....]

如上面说的一样,label也是一种属性,指的是元素的内容,还有很多其他属性,比如框图样式、连线样式等,不再赘述。

5.有向图:
有向图用digraph定义,反向和依存关系用横杠加箭头表征,例子如下:

digraph x{
    edge [fontname="FangSong"];
    node [fontname="FangSong"];
    a [label="我",color=blue];
    b [label="妹妹",color=green];
    c [label="女儿",color=red,shape=box];
    a -> b [label="兄妹",dir=both];
    a -> c [color=blue,label="父亲"];
    b -> c [color=green,label="母亲"];
}

结果:


6.和sublime协作:
如果不想用他自带的ide,又想达到差不多或者更好的使用体验,可以用别的编辑器,我用sublime,如下操作:
新建sublime的bulid文件dot.sublime-bulid,写入以下内容:

{
"shell_cmd": "yourdot.exepath -Tpng $file -o $file.png",
"file_regex": "^.+ in (.+) on line ([0-9]+)",
"selector": "source.dot",
"encoding":"cp936"
}

把yourdot.exepath替换成你graphviz安装目录下bin\dot.exe文件的绝对路径,或者将bin目录加到环境变量,直接写dot就可以。
之后打开你的dot文件,写入你的语句。
ctrl+b进行bulid,第一次生成png图像(你可以控制参数生成不同的)。
用sublime打开Png。
以后修改的时候直接bulid,之后sublime会自动响应刷新修改后的图像(本来想直接写个插件不用这么麻烦来着,没时间,以后再说ww)。
整体如下:

如果不是自己的创作,少女是会标识出来的,所以要告诉别人是少女写的哦。