From 69385e016fff7eeb145067a4e8c0a1ac6fd82f73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlio=20C=C3=A9sar=20Batista?= <julio@terrastruct.com>
Date: Mon, 5 Dec 2022 13:43:05 -0800
Subject: [PATCH] Fix actor padding for long notes

---
 d2layouts/d2sequence/sequence_diagram.go      |  3 +
 .../dagre/board.exp.json                      | 70 +++++++++----------
 .../dagre/sketch.exp.svg                      |  4 +-
 .../elk/board.exp.json                        | 70 +++++++++----------
 .../elk/sketch.exp.svg                        |  4 +-
 5 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/d2layouts/d2sequence/sequence_diagram.go b/d2layouts/d2sequence/sequence_diagram.go
index feedea323..6f9eb67d1 100644
--- a/d2layouts/d2sequence/sequence_diagram.go
+++ b/d2layouts/d2sequence/sequence_diagram.go
@@ -142,6 +142,9 @@ func newSequenceDiagram(objects []*d2graph.Object, messages []*d2graph.Edge) *se
 			nextActorHW := actors[rank+1].Width / 2.
 			sd.actorXStep[rank] = math.Max(actorHW+nextActorHW+HORIZONTAL_PAD, MIN_ACTOR_DISTANCE)
 			sd.actorXStep[rank] = math.Max(maxNoteWidth/2.+HORIZONTAL_PAD, sd.actorXStep[rank])
+			if rank > 0 {
+				sd.actorXStep[rank-1] = math.Max(maxNoteWidth/2.+HORIZONTAL_PAD, sd.actorXStep[rank-1])
+			}
 		}
 	}
 
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json
index fee70ce79..29b31ec66 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json
@@ -8,7 +8,7 @@
         "x": -121,
         "y": 266
       },
-      "width": 592,
+      "width": 655,
       "height": 952,
       "opacity": 1,
       "strokeDash": 0,
@@ -47,7 +47,7 @@
         "x": -97,
         "y": 396
       },
-      "width": 544,
+      "width": 607,
       "height": 798,
       "opacity": 1,
       "strokeDash": 0,
@@ -86,7 +86,7 @@
         "x": -73,
         "y": 526
       },
-      "width": 496,
+      "width": 559,
       "height": 644,
       "opacity": 1,
       "strokeDash": 0,
@@ -125,7 +125,7 @@
         "x": -49,
         "y": 656
       },
-      "width": 448,
+      "width": 511,
       "height": 490,
       "opacity": 1,
       "strokeDash": 0,
@@ -244,7 +244,7 @@
         "x": 25,
         "y": 1042
       },
-      "width": 350,
+      "width": 413,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -280,10 +280,10 @@
       "id": "alt",
       "type": "",
       "pos": {
-        "x": 251,
+        "x": 314,
         "y": 1148
       },
-      "width": 461,
+      "width": 460,
       "height": 518,
       "opacity": 1,
       "strokeDash": 0,
@@ -319,10 +319,10 @@
       "id": "alt.case 1",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1172
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -358,10 +358,10 @@
       "id": "alt.case 2",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1302
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -397,10 +397,10 @@
       "id": "alt.case 3",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1432
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -436,10 +436,10 @@
       "id": "alt.case 4",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1562
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -475,7 +475,7 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 250,
+        "x": 313,
         "y": 50
       },
       "width": 150,
@@ -515,7 +515,7 @@
       "id": "b.note",
       "type": "rectangle",
       "pos": {
-        "x": 62,
+        "x": 125,
         "y": 2052
       },
       "width": 525,
@@ -595,7 +595,7 @@
       "id": "c",
       "type": "",
       "pos": {
-        "x": 543,
+        "x": 605,
         "y": 50
       },
       "width": 190,
@@ -663,7 +663,7 @@
           "y": 306
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 306
         }
       ],
@@ -702,7 +702,7 @@
           "y": 436
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 436
         }
       ],
@@ -741,7 +741,7 @@
           "y": 566
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 566
         }
       ],
@@ -780,7 +780,7 @@
           "y": 952
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 952
         }
       ],
@@ -819,7 +819,7 @@
           "y": 1082
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 1082
         }
       ],
@@ -854,11 +854,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1212
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1212
         }
       ],
@@ -893,11 +893,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1342
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1342
         }
       ],
@@ -932,11 +932,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1472
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1472
         }
       ],
@@ -971,11 +971,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1602
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1602
         }
       ],
@@ -1049,11 +1049,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 176
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 2308
         }
       ],
@@ -1088,11 +1088,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 638,
+          "x": 700,
           "y": 176
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 2308
         }
       ],
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
index d5d231a05..001eaaf1f 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
@@ -2,7 +2,7 @@
 <svg
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1054" height="2458" viewBox="-221 -50 1054 2458"><style type="text/css">
+width="1116" height="2458" viewBox="-221 -50 1116 2458"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -18,7 +18,7 @@ width="1054" height="2458" viewBox="-221 -50 1054 2458"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="250" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="325.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="543" y="50" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="638.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 75.000000 178.000000 L 75.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(b -- )[0]"><path d="M 325.000000 178.000000 L 325.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(c -- )[0]"><path d="M 638.000000 178.000000 L 638.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-121" y="266" width="592" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-41.000000" y="282.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="251" y="1148" width="461" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="263.000000" y="1164.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-97" y="396" width="544" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="22.000000" y="412.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="275" y="1172" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="275" y="1302" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="275" y="1432" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1448.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="275" y="1562" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-73" y="526" width="496" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="13.500000" y="542.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-49" y="656" width="448" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-10.500000" y="672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="25" y="1042" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="45.500000" y="1058.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 77.000000 306.000000 L 321.000000 306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[1]"><path d="M 77.000000 436.000000 L 321.000000 436.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[2]"><path d="M 77.000000 566.000000 L 321.000000 566.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[3]"><path d="M 77.000000 952.000000 L 321.000000 952.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[4]"><path d="M 77.000000 1082.000000 L 321.000000 1082.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 327.000000 1212.000000 L 634.000000 1212.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[1]"><path d="M 327.000000 1342.000000 L 634.000000 1342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[2]"><path d="M 327.000000 1472.000000 L 634.000000 1472.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[3]"><path d="M 327.000000 1602.000000 L 634.000000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.a note"><g class="shape" ><rect x="1" y="696" width="148" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="762.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><rect x="62" y="2052" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="324.500000" y="2118.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="6" y="1732" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="74.500000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="74.500000" dy="0.000000">just</tspan><tspan x="74.500000" dy="18.000000">a</tspan><tspan x="74.500000" dy="18.000000">long</tspan><tspan x="74.500000" dy="18.000000">note</tspan><tspan x="74.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="388.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="605" y="50" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="700.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 75.000000 178.000000 L 75.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(b -- )[0]"><path d="M 388.000000 178.000000 L 388.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(c -- )[0]"><path d="M 700.000000 178.000000 L 700.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-121" y="266" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-41.000000" y="282.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="314" y="1148" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="326.000000" y="1164.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-97" y="396" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="22.000000" y="412.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="338" y="1172" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="338" y="1302" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="338" y="1432" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1448.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="338" y="1562" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-73" y="526" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="13.500000" y="542.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-49" y="656" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-10.500000" y="672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="25" y="1042" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="45.500000" y="1058.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 77.000000 306.000000 L 384.000000 306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[1]"><path d="M 77.000000 436.000000 L 384.000000 436.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[2]"><path d="M 77.000000 566.000000 L 384.000000 566.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[3]"><path d="M 77.000000 952.000000 L 384.000000 952.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[4]"><path d="M 77.000000 1082.000000 L 384.000000 1082.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 390.000000 1212.000000 L 696.000000 1212.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[1]"><path d="M 390.000000 1342.000000 L 696.000000 1342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[2]"><path d="M 390.000000 1472.000000 L 696.000000 1472.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[3]"><path d="M 390.000000 1602.000000 L 696.000000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.a note"><g class="shape" ><rect x="1" y="696" width="148" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="762.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><rect x="125" y="2052" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="387.500000" y="2118.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="6" y="1732" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="74.500000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="74.500000" dy="0.000000">just</tspan><tspan x="74.500000" dy="18.000000">a</tspan><tspan x="74.500000" dy="18.000000">long</tspan><tspan x="74.500000" dy="18.000000">note</tspan><tspan x="74.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json
index fee70ce79..29b31ec66 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json
@@ -8,7 +8,7 @@
         "x": -121,
         "y": 266
       },
-      "width": 592,
+      "width": 655,
       "height": 952,
       "opacity": 1,
       "strokeDash": 0,
@@ -47,7 +47,7 @@
         "x": -97,
         "y": 396
       },
-      "width": 544,
+      "width": 607,
       "height": 798,
       "opacity": 1,
       "strokeDash": 0,
@@ -86,7 +86,7 @@
         "x": -73,
         "y": 526
       },
-      "width": 496,
+      "width": 559,
       "height": 644,
       "opacity": 1,
       "strokeDash": 0,
@@ -125,7 +125,7 @@
         "x": -49,
         "y": 656
       },
-      "width": 448,
+      "width": 511,
       "height": 490,
       "opacity": 1,
       "strokeDash": 0,
@@ -244,7 +244,7 @@
         "x": 25,
         "y": 1042
       },
-      "width": 350,
+      "width": 413,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -280,10 +280,10 @@
       "id": "alt",
       "type": "",
       "pos": {
-        "x": 251,
+        "x": 314,
         "y": 1148
       },
-      "width": 461,
+      "width": 460,
       "height": 518,
       "opacity": 1,
       "strokeDash": 0,
@@ -319,10 +319,10 @@
       "id": "alt.case 1",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1172
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -358,10 +358,10 @@
       "id": "alt.case 2",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1302
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -397,10 +397,10 @@
       "id": "alt.case 3",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1432
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -436,10 +436,10 @@
       "id": "alt.case 4",
       "type": "",
       "pos": {
-        "x": 275,
+        "x": 338,
         "y": 1562
       },
-      "width": 413,
+      "width": 412,
       "height": 80,
       "opacity": 1,
       "strokeDash": 0,
@@ -475,7 +475,7 @@
       "id": "b",
       "type": "",
       "pos": {
-        "x": 250,
+        "x": 313,
         "y": 50
       },
       "width": 150,
@@ -515,7 +515,7 @@
       "id": "b.note",
       "type": "rectangle",
       "pos": {
-        "x": 62,
+        "x": 125,
         "y": 2052
       },
       "width": 525,
@@ -595,7 +595,7 @@
       "id": "c",
       "type": "",
       "pos": {
-        "x": 543,
+        "x": 605,
         "y": 50
       },
       "width": 190,
@@ -663,7 +663,7 @@
           "y": 306
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 306
         }
       ],
@@ -702,7 +702,7 @@
           "y": 436
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 436
         }
       ],
@@ -741,7 +741,7 @@
           "y": 566
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 566
         }
       ],
@@ -780,7 +780,7 @@
           "y": 952
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 952
         }
       ],
@@ -819,7 +819,7 @@
           "y": 1082
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 1082
         }
       ],
@@ -854,11 +854,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1212
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1212
         }
       ],
@@ -893,11 +893,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1342
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1342
         }
       ],
@@ -932,11 +932,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1472
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1472
         }
       ],
@@ -971,11 +971,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 1602
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 1602
         }
       ],
@@ -1049,11 +1049,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 325,
+          "x": 388,
           "y": 176
         },
         {
-          "x": 325,
+          "x": 388,
           "y": 2308
         }
       ],
@@ -1088,11 +1088,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 638,
+          "x": 700,
           "y": 176
         },
         {
-          "x": 638,
+          "x": 700,
           "y": 2308
         }
       ],
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
index d5d231a05..001eaaf1f 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
@@ -2,7 +2,7 @@
 <svg
 style="background: white;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="1054" height="2458" viewBox="-221 -50 1054 2458"><style type="text/css">
+width="1116" height="2458" viewBox="-221 -50 1116 2458"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -18,7 +18,7 @@ width="1054" height="2458" viewBox="-221 -50 1054 2458"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="250" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="325.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="543" y="50" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="638.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 75.000000 178.000000 L 75.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(b -- )[0]"><path d="M 325.000000 178.000000 L 325.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(c -- )[0]"><path d="M 638.000000 178.000000 L 638.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-121" y="266" width="592" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-41.000000" y="282.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="251" y="1148" width="461" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="263.000000" y="1164.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-97" y="396" width="544" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="22.000000" y="412.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="275" y="1172" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="275" y="1302" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="275" y="1432" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1448.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="275" y="1562" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="298.500000" y="1578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-73" y="526" width="496" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="13.500000" y="542.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-49" y="656" width="448" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-10.500000" y="672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="25" y="1042" width="350" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="45.500000" y="1058.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 77.000000 306.000000 L 321.000000 306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[1]"><path d="M 77.000000 436.000000 L 321.000000 436.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[2]"><path d="M 77.000000 566.000000 L 321.000000 566.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[3]"><path d="M 77.000000 952.000000 L 321.000000 952.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[4]"><path d="M 77.000000 1082.000000 L 321.000000 1082.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 327.000000 1212.000000 L 634.000000 1212.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[1]"><path d="M 327.000000 1342.000000 L 634.000000 1342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[2]"><path d="M 327.000000 1472.000000 L 634.000000 1472.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[3]"><path d="M 327.000000 1602.000000 L 634.000000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.a note"><g class="shape" ><rect x="1" y="696" width="148" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="762.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><rect x="62" y="2052" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="324.500000" y="2118.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="6" y="1732" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="74.500000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="74.500000" dy="0.000000">just</tspan><tspan x="74.500000" dy="18.000000">a</tspan><tspan x="74.500000" dy="18.000000">long</tspan><tspan x="74.500000" dy="18.000000">note</tspan><tspan x="74.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="50" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="388.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="605" y="50" width="190" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="700.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">just an actor</text></g><g id="(a -- )[0]"><path d="M 75.000000 178.000000 L 75.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(b -- )[0]"><path d="M 388.000000 178.000000 L 388.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(c -- )[0]"><path d="M 700.000000 178.000000 L 700.000000 2307.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="this is a message group"><g class="shape blend" ><rect x="-121" y="266" width="655" height="952" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-41.000000" y="282.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">this is a message group</text></g><g id="alt"><g class="shape blend" ><rect x="314" y="1148" width="460" height="518" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="326.000000" y="1164.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">alt</text></g><g id="this is a message group.and this is a nested message group"><g class="shape blend" ><rect x="-97" y="396" width="607" height="798" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="22.000000" y="412.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">and this is a nested message group</text></g><g id="alt.case 1"><g class="shape blend" ><rect x="338" y="1172" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1188.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 1</text></g><g id="alt.case 2"><g class="shape blend" ><rect x="338" y="1302" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 2</text></g><g id="alt.case 3"><g class="shape blend" ><rect x="338" y="1432" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1448.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 3</text></g><g id="alt.case 4"><g class="shape blend" ><rect x="338" y="1562" width="412" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="361.500000" y="1578.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">case 4</text></g><g id="this is a message group.and this is a nested message group.what about more nesting"><g class="shape blend" ><rect x="-73" y="526" width="559" height="644" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="13.500000" y="542.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">what about more nesting</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town"><g class="shape blend" ><rect x="-49" y="656" width="511" height="490" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="-10.500000" y="672.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">crazy town</text></g><g id="this is a message group.and this is a nested message group.what about more nesting.crazy town.whoa"><g class="shape blend" ><rect x="25" y="1042" width="413" height="80" style="fill:#DEE1EB;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text" x="45.500000" y="1058.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">whoa</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 77.000000 306.000000 L 384.000000 306.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[1]"><path d="M 77.000000 436.000000 L 384.000000 436.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[2]"><path d="M 77.000000 566.000000 L 384.000000 566.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[3]"><path d="M 77.000000 952.000000 L 384.000000 952.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(a -&gt; b)[4]"><path d="M 77.000000 1082.000000 L 384.000000 1082.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[0]"><path d="M 390.000000 1212.000000 L 696.000000 1212.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[1]"><path d="M 390.000000 1342.000000 L 696.000000 1342.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[2]"><path d="M 390.000000 1472.000000 L 696.000000 1472.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="(b -&gt; c)[3]"><path d="M 390.000000 1602.000000 L 696.000000 1602.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="a.a note"><g class="shape" ><rect x="1" y="696" width="148" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="75.000000" y="762.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note</text></g><g id="b.note"><g class="shape" ><rect x="125" y="2052" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="387.500000" y="2118.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="6" y="1732" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="74.500000" y="1798.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="74.500000" dy="0.000000">just</tspan><tspan x="74.500000" dy="18.000000">a</tspan><tspan x="74.500000" dy="18.000000">long</tspan><tspan x="74.500000" dy="18.000000">note</tspan><tspan x="74.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }