docs: add sample for link

_fixtures/visual/visual.svg

@@ -4,20 +4,20 @@
 <!-- Generated by graphviz version 2.43.0 (0)
  -->
 <!-- Title: G Pages: 1 -->
-<svg width="188pt" height="136pt"
- viewBox="0.00 0.00 188.00 136.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 132)">
+<svg width="110pt" height="218pt"
+ viewBox="0.00 0.00 110.00 218.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 214)">
 <title>G</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-132 184,-132 184,4 -4,4"/>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-214 106,-214 106,4 -4,4"/>
 <g id="clust1" class="cluster">
 <title>cluster1</title>
-<polygon fill="none" stroke="black" points="8,-8 8,-120 172,-120 172,-8 8,-8"/>
-<text text-anchor="middle" x="90" y="-104.8" font-family="Times,serif" font-size="14.00">com</text>
+<polygon fill="none" stroke="black" points="8,-8 8,-202 94,-202 94,-8 8,-8"/>
+<text text-anchor="middle" x="51" y="-186.8" font-family="Times,serif" font-size="14.00">com</text>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster2</title>
-<polygon fill="none" stroke="black" points="94,-16 94,-90 164,-90 164,-16 94,-16"/>
-<text text-anchor="middle" x="129" y="-74.8" font-family="Times,serif" font-size="14.00">phodal</text>
+<polygon fill="none" stroke="black" points="16,-98 16,-172 86,-172 86,-98 16,-98"/>
+<text text-anchor="middle" x="51" y="-156.8" font-family="Times,serif" font-size="14.00">phodal</text>
 </g>
 <g id="clust3" class="cluster">
 <title>cluster3</title>
@@ -27,8 +27,8 @@
 <!-- node19 -->
 <g id="node1" class="node">
 <title>node19</title>
-<polygon fill="none" stroke="black" points="156,-60 102,-60 102,-24 156,-24 156,-60"/>
-<text text-anchor="middle" x="129" y="-37.8" font-family="Times,serif" font-size="14.00">Ledge</text>
+<polygon fill="none" stroke="black" points="78,-142 24,-142 24,-106 78,-106 78,-142"/>
+<text text-anchor="middle" x="51" y="-119.8" font-family="Times,serif" font-size="14.00">Ledge</text>
 </g>
 <!-- node20 -->
 <g id="node2" class="node">
@@ -36,5 +36,11 @@
 <polygon fill="none" stroke="black" points="78,-60 24,-60 24,-24 78,-24 78,-60"/>
 <text text-anchor="middle" x="51" y="-37.8" font-family="Times,serif" font-size="14.00">Spring</text>
 </g>
+<!-- node19&#45;&gt;node20 -->
+<g id="edge1" class="edge">
+<title>node19&#45;&gt;node20</title>
+<path fill="none" stroke="black" d="M51,-105.64C51,-95.3 51,-81.94 51,-70.22"/>
+<polygon fill="black" stroke="black" points="54.5,-70.05 51,-60.05 47.5,-70.05 54.5,-70.05"/>
+</g>
 </g>
 </svg>

_fixtures/visual/visual_demo.dot

@@ -11,4 +11,6 @@ digraph G {
                 node20 [ label="Spring", shape=box ];
             }
     }
+
+    node19 -> node20
 }
\ No newline at end of file