Markdown工具链整合 -- Graphviz：脚本基本语法

Graphviz笔记系列导航

1. Markdown工具链整合 -- Graphviz：Graphviz简介
2. Markdown工具链整合 -- Graphviz：脚本基本语法（实体部分）

Graphviz的脚本语法结构

Graphviz支持digraph（direction graph）有向图和graph无向图两种图形，脚本的语法非常简单，并且与C/CPP语法类似：

1. 代码块（图或子图）： {}包含的语句是代码块
2. 语句： 语句以;结尾（可选）、也 不必强制换行 （但为可读性建议换行并以;结尾），语句有：代码块语句、节点语句、连线语句、属性语句四种
3. 实体对象标识符： 可以是C/CPP标识符、数字、字符串（中文字符串等非英文字符串也可以）、用单引号或双引号包含的字符串（用于有标点字符或空白字符的字符串），总的来说，Graphviz的实体对象标识符除了特殊字符外均是合法的标识符
4. 注释： //表示单行注释，/*...*/表示多行注释

Graphviz的三种实体对象和属性

Graphviz有三类实体对象，在这些实体上可以定义属性（如：颜色、形状、文本等）：

1. G - Graph（图）： Graph类似于Container（容器）的作用，用于容纳N和E
2. N - Node（结点）： 相同的标识符被视为同一个节点
3. E - Edge（连线）： 节点之间的连线

Graphviz的实体对象均在首次定义（即：首次出现）时被创建。

Grpahviz图实体

Graphviz语言支持子图，子图中的N和E在不同的代码块中，因此，Graphviz的Graph可以细分成三类：

1. G - Graph/Main Graph（图）： 以digraph定义的是有向图，以graph定义的是无向图
2. S - Subgraph（子图）： 以代码块形式的即是子图（包括不以cluster开头定义的subgraph代码块），S内定义的N和E公共属性值是代码块内属性值，即超出S外，该公共属性值不起作用，Subgraph本身没有可显示的属性，Subgraph的作用
3. C - Cluster Subgraph（聚集子图）： 以cluster开头定义的subgraph代码块，C不仅有S的容纳代码块内属性值的作用外，在其内定义的N还会被渲染在一个子图框内

子图的类型（有向图还是无向图）与父图相同，子图的名称以cluster开头才被当成聚集子图渲染。

digraph graph_name{
    bgcolor="transparent";//背景透明
    
    subgraph cluster_subgraph_name{//聚集子图
        node[shape=box];
        cluster_A -> cluster_B;
    }
    
    subgraph subgraph_name{//子图
        node[shape=none];
        sub_A -> sub_B;
    }
    
    {//匿名子图
        node[shape=octagon];
        nest_A -> nest_B;
    }
    
    global_A -> global_B;
    
    cluster_B -> global_B;
    sub_B -> global_B;
    nest_B -> global_B;
}

Graphviz图与子图实体

Grpahviz节点实体之基本节点

Graphviz基本节点就是节点标识符加上属性限定符“[]”包围着的可选节点属性，如果基本节点不定义label属性值则将节点标识符作为文本进行显示。

digraph gv_ex_basic_node{
    bgcolor="transparent";//背景透明
    
    node_display_this_id;
    
    node_display_label[label="显示\n标签值"];
}

Graphviz节点实体之基本节点

Grpahviz节点实体之HTML节点

Graphviz的label属性支持HTML语法，使用HTML语法时：

1. node的shape属性设置成none
2. node的margin属性设置成0
3. node的label属性字符串通过尖括号<...>包含HTML语法字符串定义

注：HTML节点的label属性值不建议使用引号包含，因为虽然可以被正确渲染，但脚本源码会失去语法高亮的效果

digraph HTML_label_Example
{
    
    bgcolor="transparent";//背景透明
    
    html_ex_node[shape=none, margin=0, label=<
        <table border="0" cellborder="1" cellspacing="0" cellpadding="4">
            <tr>
                <td rowspan="2">test</td>
                <td>a</td>                
                <td rowspan="2">HTML-Like<br/>label</td>
            </tr>
            <tr>
                <td>b</td>
            </tr>
        </table>
    >];
}

Graphviz节点实体之HTML节点

Graphviz节点实体之Record节点

当Node的定义为shape = record时，label属性定义了Node的结构，具体为：

• ...|...： 分隔的字符串会在绘制的节点表现为一条分隔符
• <...>： 定义了锚点（Anchor），锚点可以被引用为edge的起点或终点，引用语法是${node_id}:${anchor_id}，即用:引用node的anchor
• {...}： 花括号里定义的分隔符分隔节点将从切换方向排布（原水平分隔将变成垂直分隔，原垂直分隔将变成水平分隔）

Graphviz的连线实体

digraph有向图使用->定义Edge，graph无向图使用-定义Edge。