From dab9865ae32016f43043fc32d4d11d196fe8022b Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Sun, 4 Dec 2022 22:34:38 -0800
Subject: [PATCH] increase self connection width

---
 d2layouts/d2sequence/constants.go                |  2 ++
 d2layouts/d2sequence/sequence_diagram.go         |  2 +-
 .../dagre/board.exp.json                         | 16 ++++++++--------
 .../dagre/sketch.exp.svg                         | 14 +++++++-------
 .../elk/board.exp.json                           | 16 ++++++++--------
 .../elk/sketch.exp.svg                           | 14 +++++++-------
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/d2layouts/d2sequence/constants.go b/d2layouts/d2sequence/constants.go
index 67bd7b306..993ebffc8 100644
--- a/d2layouts/d2sequence/constants.go
+++ b/d2layouts/d2sequence/constants.go
@@ -10,6 +10,8 @@ const MIN_ACTOR_DISTANCE = 70.
 
 const MIN_ACTOR_WIDTH = 150.
 
+const SELF_MESSAGE_HORIZONTAL_TRAVEL = 100.
+
 // min vertical distance between messages
 const MIN_MESSAGE_DISTANCE = 80.
 
diff --git a/d2layouts/d2sequence/sequence_diagram.go b/d2layouts/d2sequence/sequence_diagram.go
index 33ea2fc40..a6a704cc2 100644
--- a/d2layouts/d2sequence/sequence_diagram.go
+++ b/d2layouts/d2sequence/sequence_diagram.go
@@ -427,7 +427,7 @@ func (sd *sequenceDiagram) routeMessages() error {
 		isSelfMessage := message.Src == message.Dst
 
 		if isSelfMessage || isToDescendant || isFromDescendant {
-			midX := startX + MIN_MESSAGE_DISTANCE
+			midX := startX + SELF_MESSAGE_HORIZONTAL_TRAVEL
 			endY := startY + MIN_MESSAGE_DISTANCE
 			message.Route = []*geo.Point{
 				geo.NewPoint(startX, startY),
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/board.exp.json b/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/board.exp.json
index e34ff0b04..6d354385a 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/board.exp.json
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/board.exp.json
@@ -301,11 +301,11 @@
           "y": 349
         },
         {
-          "x": 155,
+          "x": 175,
           "y": 349
         },
         {
-          "x": 155,
+          "x": 175,
           "y": 429
         },
         {
@@ -387,11 +387,11 @@
           "y": 609
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 609
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 689
         },
         {
@@ -434,11 +434,11 @@
           "y": 739
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 739
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 819
         },
         {
@@ -481,11 +481,11 @@
           "y": 869
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 869
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 949
         },
         {
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
index 404055205..8756bfaa5 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/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="646" height="1409" viewBox="-100 -50 646 1409"><style type="text/css">
+width="666" height="1409" viewBox="-100 -50 666 1409"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -14,13 +14,13 @@ width="646" height="1409" viewBox="-100 -50 646 1409"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="169" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.000000" y="137.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="220" y="52" width="150" height="167" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 75.000000 221.000000 L 75.000000 1258.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 295.000000 221.000000 L 295.000000 1258.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.1"><g class="shape" ><rect x="289" y="673" width="12" height="228" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="69" y="967" width="12" height="178" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="289" y="1113" width="12" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="285" y="803" width="20" height="82" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="65" y="983" width="20" height="80" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[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 349.000000 L 145.000000 349.000000 S 155.000000 349.000000 155.000000 359.000000 L 155.000000 419.000000 S 155.000000 429.000000 145.000000 429.000000 L 79.000000 429.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="155.500000" y="395.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 77.000000 479.000000 L 291.000000 479.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="185.000000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 297.000000 609.000000 L 365.000000 609.000000 S 375.000000 609.000000 375.000000 619.000000 L 375.000000 679.000000 S 375.000000 689.000000 365.000000 689.000000 L 305.000000 689.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.000000" y="652.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 303.000000 739.000000 L 365.000000 739.000000 S 375.000000 739.000000 375.000000 749.000000 L 375.000000 809.000000 S 375.000000 819.000000 365.000000 819.000000 L 309.000000 819.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.500000" y="783.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 307.000000 869.000000 L 365.000000 869.000000 S 375.000000 869.000000 375.000000 879.000000 L 375.000000 939.000000 S 375.000000 949.000000 365.000000 949.000000 L 299.000000 949.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.000000" y="920.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 293.000000 999.000000 L 89.000000 999.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="190.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 83.000000 1129.000000 L 285.000000 1129.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="646" height="1409">
-<rect x="0" y="0" width="646" height="1409" fill="white"></rect>
-<rect x="104.000000" y="379.000000" width="103" height="21" fill="black"></rect>
+</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="169" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.000000" y="137.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="220" y="52" width="150" height="167" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 75.000000 221.000000 L 75.000000 1258.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 295.000000 221.000000 L 295.000000 1258.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.1"><g class="shape" ><rect x="289" y="673" width="12" height="228" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="69" y="967" width="12" height="178" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="289" y="1113" width="12" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="285" y="803" width="20" height="82" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="65" y="983" width="20" height="80" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[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 349.000000 L 165.000000 349.000000 S 175.000000 349.000000 175.000000 359.000000 L 175.000000 419.000000 S 175.000000 429.000000 165.000000 429.000000 L 79.000000 429.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="175.500000" y="395.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 77.000000 479.000000 L 291.000000 479.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="185.000000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 297.000000 609.000000 L 385.000000 609.000000 S 395.000000 609.000000 395.000000 619.000000 L 395.000000 679.000000 S 395.000000 689.000000 385.000000 689.000000 L 305.000000 689.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.000000" y="652.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 303.000000 739.000000 L 385.000000 739.000000 S 395.000000 739.000000 395.000000 749.000000 L 395.000000 809.000000 S 395.000000 819.000000 385.000000 819.000000 L 309.000000 819.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.500000" y="783.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 307.000000 869.000000 L 385.000000 869.000000 S 395.000000 869.000000 395.000000 879.000000 L 395.000000 939.000000 S 395.000000 949.000000 385.000000 949.000000 L 299.000000 949.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.000000" y="920.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 293.000000 999.000000 L 89.000000 999.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="190.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 83.000000 1129.000000 L 285.000000 1129.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="666" height="1409">
+<rect x="0" y="0" width="666" height="1409" fill="white"></rect>
+<rect x="124.000000" y="379.000000" width="103" height="21" fill="black"></rect>
 <rect x="134.000000" y="469.000000" width="102" height="21" fill="black"></rect>
-<rect x="328.000000" y="636.000000" width="94" height="21" fill="black"></rect>
-<rect x="304.000000" y="767.000000" width="143" height="21" fill="black"></rect>
-<rect x="344.000000" y="904.000000" width="62" height="21" fill="black"></rect>
+<rect x="348.000000" y="636.000000" width="94" height="21" fill="black"></rect>
+<rect x="324.000000" y="767.000000" width="143" height="21" fill="black"></rect>
+<rect x="364.000000" y="904.000000" width="62" height="21" fill="black"></rect>
 <rect x="172.000000" y="989.000000" width="36" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/board.exp.json b/e2etests/testdata/stable/sequence_diagram_self_edges/elk/board.exp.json
index e34ff0b04..6d354385a 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/board.exp.json
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/elk/board.exp.json
@@ -301,11 +301,11 @@
           "y": 349
         },
         {
-          "x": 155,
+          "x": 175,
           "y": 349
         },
         {
-          "x": 155,
+          "x": 175,
           "y": 429
         },
         {
@@ -387,11 +387,11 @@
           "y": 609
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 609
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 689
         },
         {
@@ -434,11 +434,11 @@
           "y": 739
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 739
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 819
         },
         {
@@ -481,11 +481,11 @@
           "y": 869
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 869
         },
         {
-          "x": 375,
+          "x": 395,
           "y": 949
         },
         {
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
index 404055205..8756bfaa5 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/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="646" height="1409" viewBox="-100 -50 646 1409"><style type="text/css">
+width="666" height="1409" viewBox="-100 -50 666 1409"><style type="text/css">
 <![CDATA[
 .shape {
   shape-rendering: geometricPrecision;
@@ -14,13 +14,13 @@ width="646" height="1409" viewBox="-100 -50 646 1409"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="169" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.000000" y="137.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="220" y="52" width="150" height="167" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 75.000000 221.000000 L 75.000000 1258.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 295.000000 221.000000 L 295.000000 1258.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.1"><g class="shape" ><rect x="289" y="673" width="12" height="228" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="69" y="967" width="12" height="178" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="289" y="1113" width="12" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="285" y="803" width="20" height="82" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="65" y="983" width="20" height="80" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[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 349.000000 L 145.000000 349.000000 S 155.000000 349.000000 155.000000 359.000000 L 155.000000 419.000000 S 155.000000 429.000000 145.000000 429.000000 L 79.000000 429.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="155.500000" y="395.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 77.000000 479.000000 L 291.000000 479.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="185.000000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 297.000000 609.000000 L 365.000000 609.000000 S 375.000000 609.000000 375.000000 619.000000 L 375.000000 679.000000 S 375.000000 689.000000 365.000000 689.000000 L 305.000000 689.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.000000" y="652.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 303.000000 739.000000 L 365.000000 739.000000 S 375.000000 739.000000 375.000000 749.000000 L 375.000000 809.000000 S 375.000000 819.000000 365.000000 819.000000 L 309.000000 819.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.500000" y="783.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 307.000000 869.000000 L 365.000000 869.000000 S 375.000000 869.000000 375.000000 879.000000 L 375.000000 939.000000 S 375.000000 949.000000 365.000000 949.000000 L 299.000000 949.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="375.000000" y="920.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 293.000000 999.000000 L 89.000000 999.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="190.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 83.000000 1129.000000 L 285.000000 1129.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="646" height="1409">
-<rect x="0" y="0" width="646" height="1409" fill="white"></rect>
-<rect x="104.000000" y="379.000000" width="103" height="21" fill="black"></rect>
+</style><g id="a"><g class="shape" ><rect x="0" y="50" width="150" height="169" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.000000" y="137.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="220" y="52" width="150" height="167" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="295.000000" y="138.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -- )[0]"><path d="M 75.000000 221.000000 L 75.000000 1258.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 295.000000 221.000000 L 295.000000 1258.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.1"><g class="shape" ><rect x="289" y="673" width="12" height="228" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1"><g class="shape" ><rect x="69" y="967" width="12" height="178" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.3"><g class="shape" ><rect x="289" y="1113" width="12" height="80" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.1.2"><g class="shape" ><rect x="285" y="803" width="20" height="82" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="a.1.2"><g class="shape" ><rect x="65" y="983" width="20" height="80" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="(a -&gt; a)[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 349.000000 L 165.000000 349.000000 S 175.000000 349.000000 175.000000 359.000000 L 175.000000 419.000000 S 175.000000 429.000000 165.000000 429.000000 L 79.000000 429.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="175.500000" y="395.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">a self edge here</text></g><g id="(a -&gt; b)[0]"><path d="M 77.000000 479.000000 L 291.000000 479.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="185.000000" y="485.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">between actors</text></g><g id="(b -&gt; b.1)[0]"><path d="M 297.000000 609.000000 L 385.000000 609.000000 S 395.000000 609.000000 395.000000 619.000000 L 395.000000 679.000000 S 395.000000 689.000000 385.000000 689.000000 L 305.000000 689.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.000000" y="652.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to descendant</text></g><g id="b.(1 -&gt; 1.2)[0]"><path d="M 303.000000 739.000000 L 385.000000 739.000000 S 395.000000 739.000000 395.000000 749.000000 L 395.000000 809.000000 S 395.000000 819.000000 385.000000 819.000000 L 309.000000 819.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.500000" y="783.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to deeper descendant</text></g><g id="(b.1.2 -&gt; b)[0]"><path d="M 307.000000 869.000000 L 385.000000 869.000000 S 395.000000 869.000000 395.000000 879.000000 L 395.000000 939.000000 S 395.000000 949.000000 385.000000 949.000000 L 299.000000 949.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="395.000000" y="920.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">to parent</text></g><g id="(b -&gt; a.1.2)[0]"><path d="M 293.000000 999.000000 L 89.000000 999.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/><text class="text-italic" x="190.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">actor</text></g><g id="(a.1 -&gt; b.3)[0]"><path d="M 83.000000 1129.000000 L 285.000000 1129.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><mask id="labels" maskUnits="userSpaceOnUse" x="0" y="0" width="666" height="1409">
+<rect x="0" y="0" width="666" height="1409" fill="white"></rect>
+<rect x="124.000000" y="379.000000" width="103" height="21" fill="black"></rect>
 <rect x="134.000000" y="469.000000" width="102" height="21" fill="black"></rect>
-<rect x="328.000000" y="636.000000" width="94" height="21" fill="black"></rect>
-<rect x="304.000000" y="767.000000" width="143" height="21" fill="black"></rect>
-<rect x="344.000000" y="904.000000" width="62" height="21" fill="black"></rect>
+<rect x="348.000000" y="636.000000" width="94" height="21" fill="black"></rect>
+<rect x="324.000000" y="767.000000" width="143" height="21" fill="black"></rect>
+<rect x="364.000000" y="904.000000" width="62" height="21" fill="black"></rect>
 <rect x="172.000000" y="989.000000" width="36" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text-bold {