GraphViz 是一个很强大的工具，用于绘制有向图和无向图，记录该工具的使用方法

<h1 id="graphviz-dot-">GraphViz Dot 语言笔记</h1>
<p>GraphViz 安装后可以使用<code>dot</code>来运行相关的工具</p>
<p>在现在的博客中，支持将 GraphViz 渲染到网页中</p>
<h2 id="heading">图的种类</h2>
<h3 id="heading-1">有向图</h3>
<p>有向图使用<code>digraph</code>声明，使用<code>-&gt;</code>连接结点</p>
<div style="display:flex">
<div style="width:50%">
<pre style="background-color:#fff">digraph{
    a-&gt;b
}
</pre></div>
<div style="width:50%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<svg width="62pt" height="116pt"
 viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>%3</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>

<g id="node1" class="node">
<title>a</title>
<ellipse fill="none" stroke="#000000" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">a</text>
</g>

<g id="node2" class="node">
<title>b</title>
<ellipse fill="none" stroke="#000000" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">b</text>
</g>

<g id="edge1" class="edge">
<title>a&#45;&gt;b</title>
<path fill="none" stroke="#000000" d="M27,-71.8314C27,-64.131 27,-54.9743 27,-46.4166"/>
<polygon fill="#000000" stroke="#000000" points="30.5001,-46.4132 27,-36.4133 23.5001,-46.4133 30.5001,-46.4132"/>
</g>
</g>
</svg>
</div>
</div>
<h3 id="heading-2">无向图</h3>
<p>无向图使用<code>graph</code>声明，使用<code>--</code>连接结点</p>
<div style="display:flex">
<div style="width:50%">
<pre style="background-color:#fff">graph{
    a--b
}
</pre></div>
<div style="width:50%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<svg width="62pt" height="116pt"
 viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>%3</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>

<g id="node1" class="node">
<title>a</title>
<ellipse fill="none" stroke="#000000" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">a</text>
</g>

<g id="node2" class="node">
<title>b</title>
<ellipse fill="none" stroke="#000000" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">b</text>
</g>

<g id="edge1" class="edge">
<title>a&#45;&#45;b</title>
<path fill="none" stroke="#000000" d="M27,-71.8314C27,-61 27,-47.2876 27,-36.4133"/>
</g>
</g>
</svg>
</div>
</div>
<h2 id="heading-3">样式</h2>
<p>默认的样式是黑色，但是可以使用<code>[]</code>修改</p>
<p>使用<code>node[color=red]</code>可以将所有的结点设置为红色，对于单个结点，则可以直接在结点后面使用<code>[color=green]</code>来将其设置为绿色</p>
<div style="display:flex"><div style="width:50%">
<pre style="background-color:#fff">graph{
    node[color=red]
    a[color=green]
    a--b
}
</pre></div><div style="width:50%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<svg width="62pt" height="116pt"
 viewBox="0.00 0.00 62.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>%3</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>

<g id="node1" class="node">
<title>a</title>
<ellipse fill="none" stroke="#00ff00" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">a</text>
</g>

<g id="node2" class="node">
<title>b</title>
<ellipse fill="none" stroke="#ff0000" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">b</text>
</g>

<g id="edge1" class="edge">
<title>a&#45;&#45;b</title>
<path fill="none" stroke="#000000" d="M27,-71.8314C27,-61 27,-47.2876 27,-36.4133"/>
</g>
</g>
</svg>
</div></div>
<h3 id="heading-4">全局设置</h3>
<table>
<thead>
<tr>
<th style="text-align:left">节点</th>
<th style="text-align:left">连线</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">node</td>
<td style="text-align:left">edge</td>
</tr>
</tbody>
</table>
<h3 id="heading-5">样式设置</h3>
<table>
<thead>
<tr>
<th style="text-align:left">内容</th>
<th style="text-align:left">字段</th>
<th style="text-align:left">可设置的值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">背景色</td>
<td style="text-align:left">bgcolor</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">形状</td>
<td style="text-align:left">shape</td>
<td style="text-align:left">见<a href="https://www.graphviz.org/doc/info/shapes.html">Node Shapes</a></td>
</tr>
<tr>
<td style="text-align:left">大小</td>
<td style="text-align:left">size</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">字体大小</td>
<td style="text-align:left">fontsize</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">标签</td>
<td style="text-align:left">label</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">样式</td>
<td style="text-align:left">style</td>
<td></td>
</tr>
</tbody>
</table>
<div style="display:flex"><div style="width:50%">
<pre style="background-color:#fff">graph{
    a[color=green fontsize=50 fontcolor=yellow label=&#34;A&#34; style=dashed]
    a--b[label=&#34;连线&#34; color=green fontcolor=red style=dashed]
}
</pre></div><div style="width:50%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<svg width="83pt" height="184pt"
 viewBox="0.00 0.00 82.95 184.10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 180.0955)">
<title>%3</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-180.0955 78.9533,-180.0955 78.9533,4 -4,4"/>

<g id="node1" class="node">
<title>a</title>
<ellipse fill="none" stroke="#00ff00" stroke-dasharray="5,2" cx="37.4767" cy="-131.5477" rx="37.4533" ry="44.5955"/>
<text text-anchor="middle" x="37.4767" y="-119.0477" font-family="Times,serif" font-size="50.00" fill="#ffff00">A</text>
</g>

<g id="node2" class="node">
<title>b</title>
<ellipse fill="none" stroke="#000000" cx="37.4767" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="37.4767" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">b</text>
</g>

<g id="edge1" class="edge">
<title>a&#45;&#45;b</title>
<path fill="none" stroke="#00ff00" stroke-dasharray="5,2" d="M37.4767,-86.9966C37.4767,-69.2271 37.4767,-49.7807 37.4767,-36.0753"/>
<text text-anchor="middle" x="51.9767" y="-57.8" font-family="Times,serif" font-size="14.00" fill="#ff0000">连线</text>
</g>
</g>
</svg>
</div></div>