i added a label inside a path successfully but when i try to center this label by changing manually x and dy attributes. the label deforms in the center.
here is some picture and its corresponding code.
before changing the x attributes its value 135:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
after changing the x attributes new value is 145:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
There is nothing "deformed" here. That's the expected behaviour: you're using a textPath to position the text, and the path you're referencing changes orientation at the first L command.
You can clearly see that there is nothing wrong when we draw some (red) lines, showing this "bend":
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
And you can see that even better if we create several texts, increasing the dy up to your value (105):
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
Possible solution: alternatively, you can draw a curve. That way, the text will follow the path without breaks:
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
I'm trying to draw a GraphViz graph (using version 2.38.0 (20140413.2041)), and having a lot of trouble getting it to lay out the way I want it. I've tried many different combinations of hidden edges, constraint manipulation, subgraphs (both cluster and non-cluster), etc., and nothing seems to be doing what I want.
Here's my current code:
digraph G {
subgraph clustera {
style=invis;rank=same
A->B->C
}
subgraph clusterb {
style=invis;rank=same;rankdir=LR
D->E [constraint=false]
}
subgraph clusterc {
style=invis;rank=same
F->G [constraint=false]
}
C -> D
D -> F [constraint=false]
E -> C
F -> A [constraint=false]
F -> C [constraint=false]
F -> E [constraint=false]
}
And here's how it renders with dot -Tpng:
(All the F edges have "constraint" turned off, because almost anything else distorts the graph horribly.)
What I want is:
node F above node G
F and G more or less centered vertically on the graph
F and G to the right of A through E
A through E in more or less the arrangement they're in now
the edges from F to A, C, and E, and from D to F, following more or less straight lines (i.e. not routing around the right-hand side of the F/G group)
as a bonus, I'd kind of like to get A through C to center properly above D and E, but that's less important
(One thing I very much don't want is for F to appear above A, as if it were the root of the graph.)
Here's an approximation of what I'm looking for, laid out by hand in yEd:
Is this doable in GraphViz?
(I should note that I'm perfectly willing to use one of the other GraphViz tools, it's just that dot is the only one I'm at all familiar with.)
Here's my approach without subgraphs and weigths, only groups to vertically align nodes, and constraint=false as well as dir=back to preserve layout distortion.
digraph G {
// nodes without a group
D;
E;
// group left side
node[group=left];
A -> B -> C -> D;
C -> E [dir=back];
D -> E [constraint=false];
// group right side
node[group=right];
F -> G;
// inter group edges
F -> C;
edge [constraint=false];
D -> F;
F -> A;
F -> E;
}
The result can be seen here and corresponds to your approximation.
Interpreting your requirement with a little freedom you may have a graph without edges crossing
digraph G { rankdir = LR ranksep = 1.2 nodesep = 0.5
{ rank=same A -> B -> C -> D -> E }
D -> F
{ rank=same F -> G }
edge [constraint=false]
E -> C
F -> A
F -> C
F -> E
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
-->
<!-- Title: G Pages: 1 -->
<svg width="250pt" height="332pt" viewBox="0.00 0.00 250.29 332.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 328)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-328 247.294,-328 247.294,5 -4,5"></polygon>
<!-- A -->
<g id="node2" class="node"><title>A</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-306" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-301.8" font-family="Times,serif" font-size="14.00">A</text>
</g>
<!-- B -->
<g id="node4" class="node"><title>B</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-234" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-229.8" font-family="Times,serif" font-size="14.00">B</text>
</g>
<!-- A->B -->
<g id="edge3" class="edge"><title>A->B</title>
<path fill="none" stroke="black" d="M75.2936,-287.859C75.2936,-279.268 75.2936,-270.677 75.2936,-262.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-262 75.2936,-252 71.7937,-262 78.7937,-262"></polygon>
</g>
<!-- C -->
<g id="node5" class="node"><title>C</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-157.8" font-family="Times,serif" font-size="14.00">C</text>
</g>
<!-- B->C -->
<g id="edge4" class="edge"><title>B->C</title>
<path fill="none" stroke="black" d="M75.2936,-215.859C75.2936,-207.268 75.2936,-198.677 75.2936,-190.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-190 75.2936,-180 71.7937,-190 78.7937,-190"></polygon>
</g>
<!-- D -->
<g id="node6" class="node"><title>D</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-85.8" font-family="Times,serif" font-size="14.00">D</text>
</g>
<!-- C->D -->
<g id="edge5" class="edge"><title>C->D</title>
<path fill="none" stroke="black" d="M75.2936,-143.859C75.2936,-135.268 75.2936,-126.677 75.2936,-118.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-118 75.2936,-108 71.7937,-118 78.7937,-118"></polygon>
</g>
<!-- E -->
<g id="node7" class="node"><title>E</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-13.8" font-family="Times,serif" font-size="14.00">E</text>
</g>
<!-- D->E -->
<g id="edge6" class="edge"><title>D->E</title>
<path fill="none" stroke="black" d="M75.2936,-71.8594C75.2936,-63.2681 75.2936,-54.6768 75.2936,-46.0854"></path>
<polygon fill="black" stroke="black" points="78.7937,-46 75.2936,-36 71.7937,-46 78.7937,-46"></polygon>
</g>
<!-- F -->
<g id="node9" class="node"><title>F</title>
<ellipse fill="none" stroke="black" cx="215.294" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="215.294" y="-85.8" font-family="Times,serif" font-size="14.00">F</text>
</g>
<!-- D->F -->
<g id="edge8" class="edge"><title>D->F</title>
<path fill="none" stroke="black" d="M102.575,-90C123.965,-90 154.385,-90 178.082,-90"></path>
<polygon fill="black" stroke="black" points="178.11,-93.5001 188.11,-90 178.11,-86.5001 178.11,-93.5001"></polygon>
</g>
<!-- E->C -->
<g id="edge13" class="edge"><title>E->C</title>
<path fill="none" stroke="black" d="M52.7625,-28.3877C36.2645,-37.3556 15.1112,-52.027 5.2936,-72 -1.76453,-86.3591 -1.76453,-93.6409 5.2936,-108 13.4238,-124.54 29.3279,-137.445 43.9243,-146.485"></path>
<polygon fill="black" stroke="black" points="42.3564,-149.621 52.7625,-151.612 45.8691,-143.567 42.3564,-149.621"></polygon>
</g>
<!-- F->A -->
<g id="edge15" class="edge"><title>F->A</title>
<path fill="none" stroke="black" d="M204.475,-106.621C185.434,-138.661 141.876,-211.016 102.294,-270 99.7106,-273.849 96.9068,-277.876 94.1283,-281.785"></path>
<polygon fill="black" stroke="black" points="91.1877,-279.879 88.1817,-290.038 96.8671,-283.971 91.1877,-279.879"></polygon>
</g>
<!-- F->C -->
<g id="edge17" class="edge"><title>F->C</title>
<path fill="none" stroke="black" d="M193.492,-100.853C170.263,-112.973 132.471,-132.69 106.103,-146.447"></path>
<polygon fill="black" stroke="black" points="104.2,-143.492 96.9536,-151.221 107.438,-149.698 104.2,-143.492"></polygon>
</g>
<!-- F->E -->
<g id="edge19" class="edge"><title>F->E</title>
<path fill="none" stroke="black" d="M193.492,-79.1472C170.263,-67.0274 132.471,-47.31 106.103,-33.5528"></path>
<polygon fill="black" stroke="black" points="107.438,-30.3018 96.9536,-28.7791 104.2,-36.5079 107.438,-30.3018"></polygon>
</g>
<!-- G -->
<g id="node12" class="node"><title>G</title>
<ellipse fill="none" stroke="black" cx="215.294" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="215.294" y="-13.8" font-family="Times,serif" font-size="14.00">G</text>
</g>
<!-- F->G -->
<g id="edge11" class="edge"><title>F->G</title>
<path fill="none" stroke="black" d="M215.294,-71.8594C215.294,-63.2681 215.294,-54.6768 215.294,-46.0854"></path>
<polygon fill="black" stroke="black" points="218.794,-46 215.294,-36 211.794,-46 218.794,-46"></polygon>
</g>
</g>
</svg>
alternatively with bottom nodes on the same height
digraph G { rankdir = LR ranksep = 1.2 nodesep = 0.5
{ rank=same A -> B -> C -> D }
D -> E
B -> F [style=invis]
{ rank=same F -> G }
edge [constraint=false]
E -> C
F -> A
F:w -> C
D -> F
F:e -> E:e
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
-->
<!-- Title: G Pages: 1 -->
<svg width="250pt" height="260pt" viewBox="0.00 0.00 250.27 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 256)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-256 247.27,-256 247.27,5 -4,5"></polygon>
<!-- A -->
<g id="node2" class="node"><title>A</title>
<ellipse fill="none" stroke="black" cx="27" cy="-234" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-229.8" font-family="Times,serif" font-size="14.00">A</text>
</g>
<!-- B -->
<g id="node4" class="node"><title>B</title>
<ellipse fill="none" stroke="black" cx="27" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-157.8" font-family="Times,serif" font-size="14.00">B</text>
</g>
<!-- A->B -->
<g id="edge3" class="edge"><title>A->B</title>
<path fill="none" stroke="black" d="M27,-215.859C27,-207.268 27,-198.677 27,-190.085"></path>
<polygon fill="black" stroke="black" points="30.5001,-190 27,-180 23.5001,-190 30.5001,-190"></polygon>
</g>
<!-- C -->
<g id="node5" class="node"><title>C</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-85.8" font-family="Times,serif" font-size="14.00">C</text>
</g>
<!-- B->C -->
<g id="edge4" class="edge"><title>B->C</title>
<path fill="none" stroke="black" d="M27,-143.859C27,-135.268 27,-126.677 27,-118.085"></path>
<polygon fill="black" stroke="black" points="30.5001,-118 27,-108 23.5001,-118 30.5001,-118"></polygon>
</g>
<!-- F -->
<g id="node10" class="node"><title>F</title>
<ellipse fill="none" stroke="black" cx="167" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-157.8" font-family="Times,serif" font-size="14.00">F</text>
</g>
<!-- B->F -->
<!-- D -->
<g id="node6" class="node"><title>D</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">D</text>
</g>
<!-- C->D -->
<g id="edge5" class="edge"><title>C->D</title>
<path fill="none" stroke="black" d="M27,-71.8594C27,-63.2681 27,-54.6768 27,-46.0854"></path>
<polygon fill="black" stroke="black" points="30.5001,-46 27,-36 23.5001,-46 30.5001,-46"></polygon>
</g>
<!-- E -->
<g id="node8" class="node"><title>E</title>
<ellipse fill="none" stroke="black" cx="167" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-13.8" font-family="Times,serif" font-size="14.00">E</text>
</g>
<!-- D->E -->
<g id="edge7" class="edge"><title>D->E</title>
<path fill="none" stroke="black" d="M54.2816,-18C75.6717,-18 106.092,-18 129.789,-18"></path>
<polygon fill="black" stroke="black" points="129.816,-21.5001 139.816,-18 129.816,-14.5001 129.816,-21.5001"></polygon>
</g>
<!-- D->F -->
<g id="edge20" class="edge"><title>D->F</title>
<path fill="none" stroke="black" d="M42.2487,-32.8682C66.5235,-58.1984 116.031,-109.859 144.521,-139.587"></path>
<polygon fill="black" stroke="black" points="142.176,-142.199 151.622,-146.997 147.23,-137.355 142.176,-142.199"></polygon>
</g>
<!-- E->C -->
<g id="edge14" class="edge"><title>E->C</title>
<path fill="none" stroke="black" d="M145.199,-28.8528C121.969,-40.9726 84.1776,-60.69 57.8095,-74.4472"></path>
<polygon fill="black" stroke="black" points="55.9069,-71.4921 48.66,-79.2209 59.1449,-77.6982 55.9069,-71.4921"></polygon>
</g>
<!-- F->A -->
<g id="edge16" class="edge"><title>F->A</title>
<path fill="none" stroke="black" d="M145.199,-172.853C121.969,-184.973 84.1776,-204.69 57.8095,-218.447"></path>
<polygon fill="black" stroke="black" points="55.9069,-215.492 48.66,-223.221 59.1449,-221.698 55.9069,-215.492"></polygon>
</g>
<!-- F->C -->
<g id="edge18" class="edge"><title>F:w->C</title>
<path fill="none" stroke="black" d="M140,-162C103.148,-162 68.7605,-134.078 48.0591,-113.01"></path>
<polygon fill="black" stroke="black" points="50.4865,-110.483 41.0722,-105.623 45.4009,-115.293 50.4865,-110.483"></polygon>
</g>
<!-- F->E -->
<g id="edge22" class="edge"><title>F:e->E:e</title>
<path fill="none" stroke="black" d="M194,-162C254.5,-162 257.809,-33.3193 203.926,-19.2449"></path>
<polygon fill="black" stroke="black" points="204.358,-15.7717 194,-18 203.487,-22.7173 204.358,-15.7717"></polygon>
</g>
<!-- G -->
<g id="node13" class="node"><title>G</title>
<ellipse fill="none" stroke="black" cx="167" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-85.8" font-family="Times,serif" font-size="14.00">G</text>
</g>
<!-- F->G -->
<g id="edge12" class="edge"><title>F->G</title>
<path fill="none" stroke="black" d="M167,-143.859C167,-135.268 167,-126.677 167,-118.085"></path>
<polygon fill="black" stroke="black" points="170.5,-118 167,-108 163.5,-118 170.5,-118"></polygon>
</g>
</g>
</svg>
Only needed one cluster to keep the ABCDE group aligned. Backward directional arrows and weighting helped a lot.
digraph g
{
subgraph cluster_subCDE {
color=invis;
A; B; C; D; E;
}
A->B [weight=10];
A->F [dir=back];
B->C [weight=10];
F->C;
C->E [color=invis];
C->D;
D->E [constraint=false];
E->C;
F->G [weight=10];
F->D [dir=back];
F->E;
}
Is there a way to tell Dot to use a cluster but not show the rectangle around the subgraph nodes?
You can do this with style.
Example using style=invis:
digraph g{
subgraph cluster0 {
style=invis;
1 -> 2;
}
}
If you'd like to use this as a default for all subgraphs, use subgraph[style=invis] :
digraph g{
subgraph[style=invis];
subgraph cluster0 {
1 -> 2;
}
}
Edit: 9 years later...
The best solution is to use
peripheries=0
This will actually prevent generating the rectangle in svg output, whereas penwidth=0 still includes a polygon (with stroke-width="0", but it's still there).
I've added this since this is the most upvoted answer.
You can use style=invis:
subgraph cluster1 {
style=invis
...
}
As an alternative to the style=invis approach above, you can also set pencolor=transparent (either locally or globally).
This can be done by using the penwidth = 0 attribute. This neither affects the label text nor changes the bounding box of the cluster. Depending on the graphics driver this may output a zero width boundary. Using the suggested peripheries = 0 attribute forces the default rectangular surround to be removed as a side effect.
Although the style = invis and pencolor = transparent attributes work in most cases, there may be a need to avoid squashing the cluster label and leaving a transparent line around the cluster.
As noted by #marapet, peripheries=0 will remove the hairline from vector output formats like SVG that could be processed further.
You can also use peripheries=0
Use penwidth = 0 within subgraphs for which you don't want border.
This is how I am using it. It only removes the cluster border and does not cause any side effect as in with style = invis which also tends to removes the graph labels (undesired in my case).
digraph {
subgraph cluster2 {
label="set"
subgraph cluster0 {
penwidth = 0
label="hello"
1 -> 2;
}
subgraph cluster1 {
//penwidth = 0
label="world"
3 -> 2;
}
}
}
check out the live preview here
<?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">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: %0 Pages: 1 -->
<svg width="188pt" height="214pt" viewBox="0.00 0.00 188.00 213.60" 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 209.6)">
<title>%0</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-209.6 184,-209.6 184,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster2</title>
<polygon fill="none" stroke="#000000" points="8,-8 8,-197.6 172,-197.6 172,-8 8,-8"/>
<text text-anchor="middle" x="90" y="-181" font-family="Times,serif" font-size="14.00" fill="#000000">set</text>
</g>
<g id="clust2" class="cluster">
<title>cluster0</title>
<polygon fill="none" stroke="#000000" stroke-width="0" points="94,-16 94,-164.8 164,-164.8 164,-16 94,-16"/>
<text text-anchor="middle" x="129" y="-148.2" font-family="Times,serif" font-size="14.00" fill="#000000">hello</text>
</g>
<g id="clust3" class="cluster">
<title>cluster1</title>
<polygon fill="none" stroke="#000000" points="16,-88 16,-164.8 86,-164.8 86,-88 16,-88"/>
<text text-anchor="middle" x="51" y="-148.2" font-family="Times,serif" font-size="14.00" fill="#000000">world</text>
</g>
<!-- 1 -->
<g id="node1" class="node">
<title>1</title>
<ellipse fill="none" stroke="#000000" cx="129" cy="-114" rx="27" ry="18"/>
<text text-anchor="middle" x="129" y="-109.8" font-family="Times,serif" font-size="14.00" fill="#000000">1</text>
</g>
<!-- 2 -->
<g id="node2" class="node">
<title>2</title>
<ellipse fill="none" stroke="#000000" cx="129" cy="-42" rx="27" ry="18"/>
<text text-anchor="middle" x="129" y="-37.8" font-family="Times,serif" font-size="14.00" fill="#000000">2</text>
</g>
<!-- 1->2 -->
<g id="edge1" class="edge">
<title>1->2</title>
<path fill="none" stroke="#000000" d="M129,-95.8314C129,-88.131 129,-78.9743 129,-70.4166"/>
<polygon fill="#000000" stroke="#000000" points="132.5001,-70.4132 129,-60.4133 125.5001,-70.4133 132.5001,-70.4132"/>
</g>
<!-- 3 -->
<g id="node3" class="node">
<title>3</title>
<ellipse fill="none" stroke="#000000" cx="51" cy="-114" rx="27" ry="18"/>
<text text-anchor="middle" x="51" y="-109.8" font-family="Times,serif" font-size="14.00" fill="#000000">3</text>
</g>
<!-- 3->2 -->
<g id="edge2" class="edge">
<title>3->2</title>
<path fill="none" stroke="#000000" d="M67.1617,-99.0816C78.3214,-88.7802 93.3334,-74.923 105.7715,-63.4417"/>
<polygon fill="#000000" stroke="#000000" points="108.1519,-66.0076 113.1259,-56.653 103.4039,-60.864 108.1519,-66.0076"/>
</g>
</g>
</svg>