画图工具Graphviz及DOT语言初步

Graphviz简介

Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形。其Mac版本曾经获得2004年的苹果设计奖。本博是从编程随想某关系图的绘制中了解到的这款工具。本篇可以作为《ProcessOn——我最喜欢的在线画图工具》的姊妹篇,继续推荐画图工具。

Graphviz的特点在什么地方?Graphviz与一般的”所见即所得”式主要使用鼠标拖拽的普通画图工具不同,它使用一门名为dot的语言用来描述图表,用户使用dot写脚本,graphviz根据脚本自动布局生成图表。graphviz将这种方式称为”所思即所得”。使用这种方式有几个好处,一个是将用户从排版中解放出来,由工具自动处理这个过程,用户不必再关心如何布局,修改添加删除节点的时候也不用再对整个图的排版布局重新进行人工的整理;另一个好处是某些复杂的情况,比如代码的类图和调用图,dot脚本可以使用其他工具自动生成。

通俗地说,Graphviz是一款脚本式、命令行式的流程及关系画图工具。

windows用户可在官网下载安装,macos用户直接通过命令安装(需要homebrew):

brew install graphviz

在终端中输入 dot -version 可以查看Graphviz是否正确安装。

DOT语言初探

通过一个最简单的例子感受一下:

digraph {
    a
    b
    c
    a -> b ;
    a -> c ;
}

保存上述脚本为test.dot文件, 接下来将从DOT文件生成图像,在终端中执行:

dot test.dotTpngo output.png

output.png就是本次绘制的流程图,如下。

DOT只有图graph、节点node和连线edge三个主要结构。图分为有向图和无向图。无向图声明的时候使用关键字graph,有向图使用digraph。绘制更为复杂的图形需要更多的dot语法支撑,可参考Node, Edge and Graph Attributes

常见关键字

node:定义全局节点属性时使用
edge:定义全局连线属性时使用
graph:定义全局图属性,或声明一个无向图时使用
digraph:声明一个有向图时使用

节点示例快速入门

digraph node_intro {
graph [label="节点示例 ", fontname="Microsoft Yahei"];
node [fontname="Microsoft Yahei"];

shape1 [shape=box, label="矩形 "];
shape2 [shape=circle, label="圆形 "];
shape3 [shape=ellipse, label="椭圆 "];
shape4 [shape=polygon, sides=4, skew=0.4, label="平行四边形 "];
shape5 [shape=diamond, label="菱形 "];
shape6 [shape=record, label="{记录1|记录2|记录3}"];
shape7 [shape=none, label="无边框 "];
shape1:s -> shape2 -> shape3 -> shape4 -> shape5 -> shape6 -> shape7;

color1 [color=blue, label="蓝色边框 "];
color2 [style=filled, fillcolor=green, label="绿色填充 "];
color3 [color="#0000ff", style=filled, fillcolor="green:red", label="蓝色边框\n+\n由绿到红渐变色填充 "];
color1 -> color2 -> color3;

text1 [shape=box, fontsize=12, label="小字体 "];
text2 [shape=box, fontsize=24, label="大字体 "];
text3 [shape=box, fontcolor=blue, label="蓝色字体 "];
text4 [shape=box, label=<
    <table bgcolor="#aa99ff" align="center">
        <tr>
            <td colspan="3" width="20"><font point-size="24">类HTML标签 </font></td>
        </tr>
        <tr>
            <td color="red"><b>加粗 </b></td>
            <td color="green"><u>下划线 </u></td>
            <td color="blue"><i>斜体 </i></td>
        </tr>
    </table>
>];
text1 -> text2 -> text3 -> text4;

}

对应图形如下:

sublime3插件-Graphvizer

每次编写DOT文件,命令行执行渲染图形查看的方式效率较低。结合sublime text 3以及graphvizer插件可实现在sublime实时编辑、实时语法检查、实时渲染的效果。


上图中左侧为dot文件,右侧为图形实时渲染。

安装Graphvizer

在sublime text 3中通过package control(Control+Shift+P on Linux/Windows, Command+Shift+P on Mac)搜索安装graphvizer即可。

本文参考链接:
welcome to Graphviz
Node, Edge and Graph Attributes
Dot语言学习笔记
使用DOT语言和Graphviz绘图(翻译)
Graphvizer插件

Paypal:876670218@qq.com