foolish fly fox's blog

--Stay hungry, stay foolish.
--Forever young, forever weep.

Dot 语言总结

本篇博客可能是图最多的一篇吧。

参考：

DOT语言学习笔记

DOT语言-维基百科

dotguide.pdf

dot绘图语言

可以通过 vscode/atom + markdown preview enhance构建能够识别Dot语言的编辑器，具体方法请自行Google。本内容摘要讲解 Dot 语言的语法。

5种引擎

Markdown Preview Enhanced 使用 Viz.js 来渲染 dot语言图形。其支持的引擎有：dot(默认)、circo、neato、twopi 和 osage；

5中引擎有各自的特点：

dot : 节点自上而下进行绘制；
circo : 圆环布局
neato : 基于 spring-model算法，基于斥力+张力的布局
twopi : 径向布局
osage : 紧凑型布局

如代码：

digraph G{
    A->B
    B->C
    B->D
    B->E
    D->F
    A->F
}

下面是5种引擎下的显示：

dot 引擎

dot 引擎主要用于绘制有向图，也可以绘制无向图。

circo 引擎

neato 引擎

twopi 引擎

osage 引擎

下面的语法使用默认的 dot 引擎；

dot语言语法

dot 的注释

dot 支持C和C++风格的注释，有 // 和 /* */ 两种。

绘制有向图

digraph G{
    A->B
}

绘制无向图

graph G{
    A--B
}

一个节点到多个节点

graph G{
    A--{B, C}
}

多个节点到多个节点

digraph G{
    {A,B}->{A,C,D,E}
}

链

digraph G{
    {A,B}->C->{D,E}
}

对图中的元素进行设置

节点属性设置

设置节点标签

digraph G{
    A [label="寝室"]
    B [label="教室"]
    A->B
}

设置节点形状

digraph G{
    A [label="寝室", shape=circle]
    B [label="教室", shape=box]
    A->B
}

形状有很多种，总结如下：

digraph G{
    A [label="ellipse" shape=ellipse]
    B [label="cycle", shape=circle]
    C [label="box", shape=box]
    D [label="polygon", sides=7, shape=polygon]
    E [label="diamond", shape=diamond]
    F [label="none", shape=none]
    G [label="doublecircle", shape=doublecircle]
    H [label="folder",shape=folder]
    I [label="egg",shape=egg]
    J [label="point",shape=point]
    K [label="star",shape=star]
    L [label="square",shape=square]
    M [label="cylinder",shape=cylinder]
    N [label="box3d",shape=box3d]
    O [label="rarrow",shape=rarrow]
    P [label="rpromoter",shape=rpromoter]
    A->B->I->M
    C->D->J->N
    E->F->K->O
    G->H->L->P
}

实在太多了，上面只是列出了常用的一些常用的，你想要的所有形状，包括颜色、大小、背景色等等，都可以设置，详情请移步：https://www.graphviz.org/doc/info/shapes.html ；

设置节点的颜色

digraph G{
    A[shape=box,
    color=red, //红色边框
    style=filled,fillcolor="#00bfff", //蓝色填充
    fontcolor=green, //绿色字体
    fontsize=25 //设置字体大小
    ]
}

在节点中插入表格

graph G{
    A [shape=box, label=<
    <table>
        <th><td colspan="3">1</td></th>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    >]
}

边的属性

边的样式

digraph G{
    rankdir=LR
    a,b,c,d,e [shape=point]
    a->b [label=" solid",style=solid]
    b->c [label=" bold",style=bold]
    c->d [label=" dashed",style=dashed]
    d->e [label=" dotted",style="dotted"]
}

箭头样式

设置箭头方向

digraph G{
    rankdir=LR
    a,b [shape=point]
    a->b [dir=both, label="both"]
}

设置箭头大小

digraph G{
    rankdir=LR
    A->B [arrowsize=2]
}

设置箭头颜色

digraph G{
    a,b [shape=point]
    a->b [color=red]
}

设置箭头形状

diagraph G{
    rankdir=LR
    a,b,c,d,e [shape=point]
    a->b [arrowhead=box]
    b->c [arrowhead=diamond]
    c->d [arrowhead=curve]
    d->e [arrowhead=dot]
}

Error: syntax error in line 1 near 'diagraph'

全局属性设置

graph

label ：定义图的标签
bgcolor ：定义图的背景
fontname ：定义图的字体名称
fontsize ：定义图的字体大小
rankdir ：定义图的方向，可选：TB、BT、LR、RL

digraph G{
    graph [label="graph set",
    bgcolor="#00bfff", 
    fontsize=10, rankdir="LR"]
    A->B->C
}

node

digraph G{
    node [shape=box, style=filled, fillcolor="pink"]
    A->{B,C}
}

edge

digraph G{
    edge [style="dashed", color="#00bfff",dir=both]
    A->{B,C}
}

strict

用于防止两个节点重复练习：

graph {
    A -- B [label="10"]
    A -- B [label="20"]
}

strict graph {
    A -- B [label="10"]
    A -- B [label="20"]
}

应用

实际应用请看各种常用图的绘制